web左侧伸缩菜单栏/导航栏

news2024/9/21 0:47:14

效果展示:

百度网盘链接下载全部资源:

http://链接:https://pan.baidu.com/s/1ZnKdWxTH49JhqZ7Xd-cJIA?pwd=4332 提取码:4332

html/JQuery代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>1</title>
	
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css" />
        <link rel="stylesheet" href="assets/css/custom.css">
</head>
	<body>
	<div class="page-wrapper">
            <nav id="sidebar" class="sidebar-wrapper">
              <div class="sidebar-content">
                <a href="#" id="toggle-sidebar"><img src="assets/img/列表.png" width="20" class="fa fa-bars"></a>
                <div class="sidebar-brand">
                    <a href="#">pro sidebar</a>
                </div>
                <div class="sidebar-header">
                    <div class="user-pic">
                        <img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="">
                    </div>
                    <div class="user-info">
                        <span class="user-name">Jhon <strong>Smith</strong></span>
                        <span class="user-role">Administrator</span>
                        <div class="user-status">                       
                            <a href="#"><span class="label label-success">Online</span></a>                           
                        </div>
                    </div>
                </div><!-- sidebar-header  -->
                <div class="sidebar-search">
                    <div>                   
                        <div class="input-group">                          
                            <input type="text" class="form-control search-menu" placeholder="Search for...">
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>                    
                </div><!-- sidebar-search  -->
                <div class="sidebar-menu">
                    <ul>
                        <li class="header-menu"><span>Dropdown  menu</span></li>
                        <li class="sidebar-dropdown">
                            <a  href="#" ><i class="fa fa-tv"></i><span>Menu 1</span><span class="label label-danger">New</span></a>
                            <div class="sidebar-submenu">
                                <ul>
                                    <li><a href="#">submenu 1 <span class="label label-success">10</span></a> </li>
                                    <li><a href="#">submenu 2</a></li>
                                    <li><a href="#">submenu 3</a></li>
                                    <li><a href="#">submenu 4</a></li>
                                </ul>
                            </div>
                        </li>                  
                        <li class="sidebar-dropdown">
                            <a href="#"><i class="fa fa-photo"></i><span>Menu 2</span><span class="badge">3</span></a>
                            <div class="sidebar-submenu">
                                <ul>
                                    <li><a href="#">submenu 1 <span class="badge">2</span></a></li>
                                    <li><a href="#">submenu 2</a></li>
                                    <li><a href="#">submenu 3</a></li>
                                    <li><a href="#">submenu 4</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="sidebar-dropdown">
                            <a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a>
                            <div class="sidebar-submenu">
                                <ul>
                                    <li><a href="#">submenu 1</a></li>
                                    <li><a href="#">submenu 2</a></li>
                                    <li><a href="#">submenu 3</a></li>
                                    <li><a href="#">submenu 4</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="sidebar-dropdown">
                            <a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a>
                            <div class="sidebar-submenu">
                                <ul>
                                    <li><a href="#">submenu 1</a></li>
                                    <li><a href="#">submenu 2</a></li>
                                    <li><a href="#">submenu 3</a></li>
                                    <li><a href="#">submenu 4</a></li>
                                </ul>
                            </div>
                        </li>
                        <li class="header-menu"><span>Simple menu</span></li>
                        <li><a href="#"><i class="fa fa-tv"></i><span>Menu 1</span></a></li>                   
                        <li><a href="#"><i class="fa fa-photo"></i><span>Menu 2</span></a></li>
                        <li><a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a></li>
                        <li><a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a></li>
                    </ul>
                   </div><!-- sidebar-menu  -->            
                </div><!-- sidebar-content  -->
        
                <div class="sidebar-footer">
                    <a href="#"><i class="fa fa-bell"></i><span class="label label-warning notification">3</span></a>
                    <a href="#"><i class="fa fa-envelope"></i><span class="label label-success notification">7</span></a>
                    <a href="#"><i class="fa fa-gear"></i></a>
                    <a href="#"><i class="fa fa-power-off"></i></a>
                </div>
            </nav><!-- sidebar-wrapper  -->
            <main class="page-content">
                <div class="container-fluid">
                	<header class="htmleaf-header">
			</header>
			<h1 style="text-align:center;">Pro sidebar template</h1>
			<h3 style="text-align:center;">点击左上角的 <i class="fa fa-bars"></i> 按钮来查看侧边栏效果</h3>
                </div>
            </main><!-- page-content" -->
        </div><!-- page-wrapper -->
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="assets/js//jquery.mCustomScrollbar.concat.min.js"></script>
        <script src="assets/js/custom.js"></script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1369912.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷②

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷2 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷2 模块一 …

Spring MVC自定义类型转换器!!!

使用场景 在index.jsp里面添加日期类型 <form action"account/saveAccount" method"post">账户名称&#xff1a;<input type"text" name"name"><br/>账户金额&#xff1a;<input type"text" name&quo…

TCP的这些特性你知道吗?(滑动窗口篇)

如果每次 [发送方] 需要等待接受方返回数据才能发送下一条数据&#xff0c;会导致网络通信的效率非常的低&#xff0c;于是在TCP中 引入了窗口这个概念&#xff0c;即使在往返时间较长的情况下&#xff0c;它也不会降低网络通信的效率。有了窗口&#xff0c;并不代表可以无限 接…

windows rtmp发送数据流程抓包

一、connect 返回Window Acknowledgement Size&#xff1a; 返回Set Peer Bandwidth 二、 releaseStream 三、 FCPublish 四、 createStream 五、 _checkbw 六、 FCPublish返回 七、createStream 八、 _checkbw返回 九、发送关键帧 十、发送视频帧 十一、FCUnpublish 十二、del…

【Verilog】运算符

系列文章 数值&#xff08;整数&#xff0c;实数&#xff0c;字符串&#xff09;与数据类型&#xff08;wire、reg、mem、parameter&#xff09; 系列文章算术运算符关系运算符相等关系运算符逻辑运算符按位运算符归约运算符移位运算符条件运算符连接和复制运算符 算术运算符 …

生成模型 | 2024年新年新论文:audio2photoreal[正在更新中]

本博客主要包含了20240103新出的论文From Audio to Photoreal Embodiment: Synthesizing Humans in Conversations论文解释及项目实现~ 论文题目&#xff1a;20240103_From Audio to Photoreal Embodiment: Synthesizing Humans in Conversations 论文地址&#xff1a;2401.018…

Python2048小游戏核心算法(python系列26)

前言&#xff1a;做核心算法之前我们可以玩一玩这个小游戏来了解一下规则。2048在线试玩 运行效果&#xff1a; 代码案例&#xff1a; # 2048小游戏# 1.将列表中零移动到列表的末尾 def move_zeroes():x 0for i in range(len(list_nums)):if list_nums[i] ! 0:list_nums[x],…

python 基础笔记

基本数据类型 函数 lamda 匿名函数 成员方法 类 类与对象 构造方法 魔术方法 私有成员 私有方法 继承 注解 变量注解 函数注解 Union类型 多态 参考链接&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了_哔哩哔哩_bilib…

小测一下HCL中VSR的转发性能

正文共&#xff1a;555 字 10 图&#xff0c;预估阅读时间&#xff1a;1 分钟 上次我们在HCL中导入了NFV的自定义镜像&#xff08;如何在最新版的HCL 5.10.0中导入NFV镜像&#xff1f;&#xff09;&#xff0c;但是当时没有测试转发性能&#xff0c;最近HCL又更新了V5.10.1版本…

用golang 实现给图片添加文字水印

package mainimport ("fmt""github.com/golang/freetype""image""image/draw""image/jpeg""io""os""time" )func main() {// 打开原始图片file, err : os.Open("004.jpeg")if err …

[Vulnhub靶机] DriftingBlues: 5

[Vulnhub靶机] DriftingBlues: 5靶机渗透思路及方法&#xff08;个人分享&#xff09; 靶机下载地址&#xff1a; https://download.vulnhub.com/driftingblues/driftingblues5_vh.ova 靶机地址&#xff1a;192.168.67.24 攻击机地址&#xff1a;192.168.67.3 一、信息收集 …

多线程基础入门【Linux之旅】——下篇【死锁,条件变量,生产消费者模型,信号量】

目录 一&#xff0c;死锁 1. 死锁的必要条件 2&#xff0c;避免死锁 二&#xff0c;条件变量 同步概念与竞态条件 条件变量——初始化 静态初始化 动态初始化 pthread_cond_destroy (销毁) pthread_cond_wait (等待条件满足) pthread_cond_signal (唤醒线程) ph…

@PolarDB,你的动手体验搭子,来啦

前言 PolarDB是阿里云自研的新一代云原生数据库&#xff0c;在计算存储分离架构下&#xff0c;利用了软硬件结合的优势&#xff0c;为用户提供具备极致弹性、高性能、海量存储、安全可靠的数据库服务。100%兼容MySQL和PostgreSQL生态&#xff0c;高度兼容Oracle语法。 1月17日…

Linux下进程控制

文章目录 创建进程fork创建进程fork返回值写诗拷贝fork常规用法fork失败的原因 进程终止进程正常终止查看进程退出码_exit函数exit函数exit 和 _exit 的区别return退出 进程等待进程等待的方式wait方法(系统调用)waitpid方法(系统调用) WEXITSTATUS 和 WIFEXITED阻塞等待和非阻…

vue无法获取dom

处理过程 watch监听值变化 index.js:33 [Vue warn]: Error in callback for watcher "$store.state.modelsStorageUrl": "TypeError: Cannot set properties of undefined (setting modelScene)"watch: {"$store.state.modelsStorageUrl":{ha…

24上半年教师资格证笔试报名全流程✅

&#x1f550;考试时间安排 &#xff08;一&#xff09;报名时间&#xff1a; 2024年1月12日9:30至15日16:00 &#xff08;二&#xff09;缴费时间&#xff1a; 2024年1月17日24:00 &#xff08;三&#xff09;考试时间&#xff1a; 2024年3月9日星期六 &#xff08;四&#xf…

上网行为管理到底是什么!

之前经常听过上网行为管理系统&#xff0c;那这个系统到底是什么&#xff0c;还真不是很清楚&#xff01;今天仔细查了很多资料&#xff0c;分享给大家&#xff1a; 上网行为管理是指一种帮助互联网用户控制和管理对互联网的使用&#xff0c;包括对网页访问过滤、上网隐私保护…

vue3 useAttrs的使用场景,提取共有props

1 场景 多个类似组件都需要传参data&#xff0c;用于请求接口或者处理数据&#xff0c;想让组件干净整洁&#xff0c;把参数data提出来 2 方法 选项式 可以使用mixin混入或者extends继承&#xff08;略&#xff09; 组合式 可以使用hook 无脑式踩坑&#xff08;如下代码…

SwiftUI之深入解析Alignment Guides的超实用实战教程

一、Alignment Guide 简介 Alignment guides 是一个强大的布局工具&#xff0c;但通常未被充分利用。在很多情况下&#xff0c;它们可以帮助我们避免更复杂的选项&#xff0c;比如锚点偏好。如下所示&#xff0c;对对齐的更改也可以自动&#xff08;并且容易地&#xff09;动画…

Python书籍推荐,建议收藏

学习Python的书籍可太多了&#xff0c;从入门到放弃&#xff0c;应有尽有啊 入门书籍 根据豆瓣评分的高低&#xff0c;这里介绍了一些经典入门书籍&#xff0c;大家根据自身情况选择尝试 《Python编程&#xff1a;从入门到实践&#xff08;第二版&#xff09;》 非常经典且非…