首页>>导航菜单>>隐藏滑动侧边栏菜单 二级菜单侧边栏(2020-04-06)

隐藏滑动侧边栏菜单 二级菜单侧边栏

隐藏滑动侧边栏菜单 二级菜单侧边栏
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">  
  2.             <ul class="nav sidebar-nav">  
  3.                 <li class="sidebar-brand">  
  4.                     <a href="#">  
  5.                        Bootstrap 3  
  6.                     </a>  
  7.                 </li>  
  8.                 <li>  
  9.                     <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>  
  10.                 </li>  
  11.                 <li>  
  12.                     <a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>  
  13.                 </li>  
  14.   
  15.                 <li class="dropdown">  
  16.                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <span class="caret"></span></a>  
  17.                   <ul class="dropdown-menu" role="menu">  
  18.                     <li class="dropdown-header">Dropdown heading</li>  
  19.                     <li><a href="#">Action</a></li>  
  20.                     <li><a href="#">Another action</a></li>  
  21.                     <li><a href="#">Something else here</a></li>  
  22.                     <li><a href="#">Separated link</a></li>  
  23.                     <li><a href="#">One more separated link</a></li>  
  24.                   </ul>  
  25.                 </li>  
  26.   
  27.             </ul>  
  28.         </nav>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(document).ready(function () {  
  3.           var trigger = $('.hamburger'),  
  4.               overlay = $('.overlay'),  
  5.              isClosed = false;  
  6.   
  7.             trigger.click(function () {  
  8.               hamburger_cross();        
  9.             });  
  10.   
  11.             function hamburger_cross() {  
  12.   
  13.               if (isClosed == true) {            
  14.                 overlay.hide();  
  15.                 trigger.removeClass('is-open');  
  16.                 trigger.addClass('is-closed');  
  17.                 isClosed = false;  
  18.               } else {     
  19.                 overlay.show();  
  20.                 trigger.removeClass('is-closed');  
  21.                 trigger.addClass('is-open');  
  22.                 isClosed = true;  
  23.               }  
  24.           }  
  25.             
  26.           $('[data-toggle="offcanvas"]').click(function () {  
  27.                 $('#wrapper').toggleClass('toggled');  
  28.           });    
  29.         });  
  30.     </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_846.html