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

效果展示:

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

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

html/JQuery代码:

css 复制代码
<!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>
相关推荐
Devil枫21 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子1 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css
薛一半5 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js