jquery基于Bootstrap隐藏侧边栏菜单代码



487 1944 649



特效描述:jquery 基于Bootstrap 隐藏侧边栏菜单,jQuery基于Bootstrap.js制作网页左侧隐藏侧边栏下拉菜单,适用于响应式布局下拉菜单代码。

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" href="assets/css/custom.css">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js//jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/custom.js"></script>

3. HTML代码

	<div class="page-wrapper">
            <nav id="sidebar" class="sidebar-wrapper">
              <div class="sidebar-content">
                <a href="#" id="toggle-sidebar"><i class="fa fa-bars"></i></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="header">
						<h1>基于jquery和Bootstrap3的隐藏侧边栏 <span>Responsive sidebar template based on bootstrap framwork</span></h1>
					</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 -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 收缩收起展开 切换按钮 form表单 导航菜单导航条 收缩导航菜单 二级导航菜单 滑动手风琴 手风琴 侧边导航菜单 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到