首页>>导航菜单>>超简单的侧边栏隐藏导航(2018-10-24)

超简单的侧边栏隐藏导航

超简单的侧边栏隐藏导航
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="menu">  
  2.         <div class="close-menu">  
  3.             <img src="close.png">  
  4.         </div>  
  5.         <ul>  
  6.             <li><a href="#">Home</a></li>  
  7.             <li><a href="#">jQuery</a></li>  
  8.             <li><a href="#">Script</a></li>  
  9.             <li><a href="#">Net</a></li>  
  10.             <li><a href="#">About</a></li>  
  11.             <li><a href="#">Contact</a></li>  
  12.         </ul>  
  13.     </div>  
  14.   
  15.     <div class="b-wrap">  
  16.         <div class="mhead">  
  17.             <img class="menu-ham" src="hamburger.png">  
  18.             <header>Menu</header>  
  19.         </div>  
  20.   
  21.   
  22.   
  23.     </div>  

 

JavaScript Code
  1. $(".menu-ham").click(function () {  
  2.     $(".menu").animate({left: '0px'}, 100);  
  3.     $('.b-wrap').animate({left: '200px'}, 100);  
  4. });  
  5.   
  6. $(".close-menu").click(function () {  
  7.     $(".menu").animate({left: '-200px'}, 100);  
  8.     $('.b-wrap').animate({left: '0px'}, 100);  
  9. });  

 


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