首页>>导航菜单>>自适应平板手机端底部菜单 仿微信底部菜单(2017-06-22)

自适应平板手机端底部菜单 仿微信底部菜单

自适应平板手机端底部菜单 仿微信底部菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="btn3 clearfix">  
  2.   
  3.     <div class="menu">  
  4.         <div class="bt-name"><a href="javascript:;">首页</a></div>  
  5.     </div><!--menu-->  
  6.   
  7.   
  8.     <div class="menu">  
  9.         <div class="bt-name">焦点图</div>  
  10.         <div class="sanjiao"></div>  
  11.         <div class="new-sub">  
  12.             <ul >  
  13.                 <li><a href="http://www.freejs.net/jiaodiantu.html">焦点图</a></li>  
  14.                 <li><a href="http://www.freejs.net/biaodan.html" >表单</a></li>  
  15.             </ul>  
  16.             <div class="tiggle"></div>  
  17.             <div class="innertiggle"></div>  
  18.         </div>  
  19.                  
  20.     </div><!--menu-->  
  21.   
  22.   
  23.     <div class="menu" >  
  24.      <div class="bt-name">第三个菜单</div>  
  25.     <div class="sanjiao"></div>  
  26.     <div  class="new-sub">  
  27.         <ul>  
  28.             <li><a href="javascript:;">三、第一个</a></li>  
  29.             <li><a href="javascript:;" >三、第二个</a></li>  
  30.             <li><a href="javascript:;" >三、第三个</a></li>  
  31.         </ul>  
  32.         <div class="tiggle"></div>  
  33.         <div class="innertiggle"></div>  
  34.     </div>  
  35.     </div><!--menu-->  
  36.   
  37. </div><!--btn3-->  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. //弹出垂直菜单  
  3. $(".menu").click(function() {  
  4.     if ($(this).hasClass("cura")) {  
  5.         $(this).children(".new-sub").hide(); //当前菜单下的二级菜单隐藏  
  6.         $(".menu").removeClass("cura"); //同一级的菜单项  
  7.     } else {  
  8.         $(".menu").removeClass("cura"); //移除所有的样式  
  9.         $(this).addClass("cura"); //给当前菜单添加特定样式  
  10.         $(".menu").children(".new-sub").slideUp("fast"); //隐藏所有的二级菜单  
  11.         $(this).children(".new-sub").slideDown("fast"); //展示当前的二级菜单  
  12.     }  
  13. });  
  14. </script>  

 


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