导航菜单

基于Bootstrap隐藏侧边栏菜单

阿里云


这是一款响应式基于 jquery 和 Bootstrap3 的隐藏侧边栏菜单特效。该侧边栏菜单依赖于 bootstrap3 和 Malihu 滚动条美化插件,可以在桌面浏览器和移动手机上正常工作。

使用方法:

在页面中引入 jquery 和 bootstrap 相关文件,以及 font-awesome 字体图标文件和 mCustomScrollbar 相关文件。

也想出现在这里?联系我们
创客主机
  1. <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  2. <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  3. <link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css" />
  4. <link rel="stylesheet" href="assets/css/custom.css">
  5. <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  6. <script src="assets/js//jquery.mCustomScrollbar.concat.min.js"></script>
  7. <script src="assets/js/custom.js"></script>

HTML 结构:

该 bootstrap3 隐藏侧边栏菜单的完整 HTML 结构如下:

  1. <div class="page-wrapper">
  2.       <nav id="sidebar" class="sidebar-wrapper">
  3.         <div class="sidebar-content">
  4.           <a href="#" id="toggle-sidebar"><i class="fa fa-bars"></i></a>
  5.           <div class="sidebar-brand">
  6.               <a href="#">pro sidebar</a>
  7.           </div>
  8.           <div class="sidebar-header">
  9.               <div class="user-pic">
  10.                   <img class="img-responsive img-rounded" src="assets/img/user.jpg" alt="">
  11.               </div>
  12.               <div class="user-info">
  13.                   <span class="user-name">Jhon <strong>Smith</strong></span>
  14.                   <span class="user-role">Administrator</span>
  15.                   <div class="user-status">                       
  16.                       <a href="#"><span class="label label-success">Online</span></a>                           
  17.                   </div>
  18.               </div>
  19.           </div><!-- sidebar-header  -->
  20.           <div class="sidebar-search">
  21.               <div>                   
  22.                   <div class="input-group">                          
  23.                       <input type="text" class="form-control search-menu" placeholder="Search for...">
  24.                       <span class="input-group-addon"><i class="fa fa-search"></i></span>
  25.                   </div>
  26.               </div>                    
  27.           </div><!-- sidebar-search  -->
  28.           <div class="sidebar-menu">
  29.               <ul>
  30.                   <li class="header-menu"><span>Dropdown  menu</span></li>
  31.                   <li class="sidebar-dropdown">
  32.                       <a  href="#" ><i class="fa fa-tv"></i><span>Menu 1</span><span class="label label-danger">New</span></a>
  33.                       <div class="sidebar-submenu">
  34.                           <ul>
  35.                               <li><a href="#">submenu 1 <span class="label label-success">10</span></a> </li>
  36.                               <li><a href="#">submenu 2</a></li>
  37.                               <li><a href="#">submenu 3</a></li>
  38.                               <li><a href="#">submenu 4</a></li>
  39.                           </ul>
  40.                       </div>
  41.                   </li>                  
  42.                   <li class="sidebar-dropdown">
  43.                       <a href="#"><i class="fa fa-photo"></i><span>Menu 2</span><span class="badge">3</span></a>
  44.                       <div class="sidebar-submenu">
  45.                           <ul>
  46.                               <li><a href="#">submenu 1 <span class="badge">2</span></a></li>
  47.                               <li><a href="#">submenu 2</a></li>
  48.                               <li><a href="#">submenu 3</a></li>
  49.                               <li><a href="#">submenu 4</a></li>
  50.                           </ul>
  51.                       </div>
  52.                   </li>
  53.                   <li class="sidebar-dropdown">
  54.                       <a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a>
  55.                       <div class="sidebar-submenu">
  56.                           <ul>
  57.                               <li><a href="#">submenu 1</a></li>
  58.                               <li><a href="#">submenu 2</a></li>
  59.                               <li><a href="#">submenu 3</a></li>
  60.                               <li><a href="#">submenu 4</a></li>
  61.                           </ul>
  62.                       </div>
  63.                   </li>
  64.                   <li class="sidebar-dropdown">
  65.                       <a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a>
  66.                       <div class="sidebar-submenu">
  67.                           <ul>
  68.                               <li><a href="#">submenu 1</a></li>
  69.                               <li><a href="#">submenu 2</a></li>
  70.                               <li><a href="#">submenu 3</a></li>
  71.                               <li><a href="#">submenu 4</a></li>
  72.                           </ul>
  73.                       </div>
  74.                   </li>
  75.                   <li class="header-menu"><span>Simple menu</span></li>
  76.                   <li><a href="#"><i class="fa fa-tv"></i><span>Menu 1</span></a></li>                   
  77.                   <li><a href="#"><i class="fa fa-photo"></i><span>Menu 2</span></a></li>
  78.                   <li><a href="#"><i class="fa fa-bar-chart-o"></i><span>Menu 3</span></a></li>
  79.                   <li><a href="#"><i class="fa fa-diamond"></i><span>Menu 4</span></a></li>
  80.               </ul>
  81.              </div><!-- sidebar-menu  -->           
  82.           </div><!-- sidebar-content  -->
  83.  
  84.           <div class="sidebar-footer">
  85.               <a href="#"><i class="fa fa-bell"></i><span class="label label-warning notification">3</span></a>
  86.               <a href="#"><i class="fa fa-envelope"></i><span class="label label-success notification">7</span></a>
  87.               <a href="#"><i class="fa fa-gear"></i></a>
  88.               <a href="#"><i class="fa fa-power-off"></i></a>
  89.           </div>
  90.       </nav><!-- sidebar-wrapper  -->
  91.       <main class="page-content">
  92.           <div class="container-fluid">
  93.     <!-- 这里放置页面内容-->
  94.           </div>
  95.       </main><!-- page-content" -->
  96.   </div><!-- page-wrapper -->

该 bootstrap3 隐藏侧边栏菜单的 github 地址为:https://github.com/azouaoui-med/pro-sidebar-template

基于 Bootstrap 隐藏侧边栏菜单

已有 1290 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(3)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!