首页>>导航菜单>>简单的侧边栏展开式菜单(2020-04-14)

简单的侧边栏展开式菜单

简单的侧边栏展开式菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <header>  
  2.   <div id="navbar">  
  3.     <a href="#" class="menubtn">menu</a>  
  4.     <!-- use captain icon for toggle menu -->  
  5.     <div id="hamburgermenu">  
  6.       <ul>  
  7.         <li><a href="#">Home</a></li>  
  8.         <li><a href="#">About</a></li>  
  9.         <li><a href="#">News</a></li>  
  10.         <li><a href="#">Products</a></li>  
  11.         <li><a href="#">Contact</a></li>  
  12.       </ul>  
  13.     </div>  
  14.   </div>  
  15.   <div class="overlay"></div>  
  16. </header>  

 

JavaScript Code
  1. $(function(){  
  2.   var menuwidth  = 240; // 边栏宽度  
  3.   var menuspeed  = 400; // 边栏滑出耗费时间  
  4.     
  5.   var $bdy       = $('body');  
  6.   var $container = $('#pgcontainer');  
  7.   var $burger    = $('#hamburgermenu');  
  8.   var negwidth   = "-"+menuwidth+"px";  
  9.   var poswidth   = menuwidth+"px";  
  10.     
  11.   $('.menubtn').on('click',function(e){  
  12.     if($bdy.hasClass('openmenu')) {  
  13.       jsAnimateMenu('close');  
  14.     } else {  
  15.       jsAnimateMenu('open');  
  16.     }  
  17.   });  
  18.     
  19.   $('.overlay').on('click', function(e){  
  20.     if($bdy.hasClass('openmenu')) {  
  21.       jsAnimateMenu('close');  
  22.     }  
  23.   });  
  24.     
  25.   function jsAnimateMenu(tog) {  
  26.     if(tog == 'open') {  
  27.       $bdy.addClass('openmenu');  
  28.         
  29.       $container.animate({marginRight: negwidth, marginLeft: poswidth}, menuspeed);  
  30.       $burger.animate({width: poswidth}, menuspeed);  
  31.       $('.overlay').animate({left: poswidth}, menuspeed);  
  32.     }  
  33.       
  34.     if(tog == 'close') {  
  35.       $bdy.removeClass('openmenu');  
  36.         
  37.       $container.animate({marginRight: "0", marginLeft: "0"}, menuspeed);  
  38.       $burger.animate({width: "0"}, menuspeed);  
  39.       $('.overlay').animate({left: "0"}, menuspeed);  
  40.     }  
  41.   }  
  42. });  

 


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