首页>>导航菜单>>仿微信底部固定二级导航菜单(2017-06-19)

仿微信底部固定二级导航菜单

仿微信底部固定二级导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. window.onload = function(){  
  3.     $('#menu ul li').each(function(j){  
  4.         $('#menu ul li').eq(j).removeClass("on");  
  5.         $('#menu ul li span').eq(j).animate({bottom:-$('#menu ul li span').eq(j).height()},100);  
  6.     });  
  7. }  
  8.   
  9. $('#menu ul li').each(function(i){  
  10.     $(this).click(function(){  
  11.         if($(this).attr("class")!="on"){  
  12.             $('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);  
  13.             $('#menu ul .on').removeClass("on");  
  14.             $(this).addClass("on");  
  15.             $('#menu ul li span').eq(i).animate({bottom:35},200);  
  16.             $('.footer_front').show();  
  17.         }else{  
  18.             $('#menu ul li span').eq(i).animate({bottom:-$('#menu ul li span').eq(i).height()},200);  
  19.             $(this).removeClass("on");  
  20.             $('.footer_front').hide();  
  21.         }  
  22.     });  
  23. });  
  24.   
  25. $('.footer_front').click(function(){  
  26.     $('#menu ul .on span').animate({bottom:-$('#menu ul .on span').height()},200);  
  27.     $('#menu ul .on').removeClass("on");  
  28.     $(this).hide();  
  29. });  
  30. </script>  

 

XML/HTML Code
  1. <div id="menu">  
  2.     <ul>  
  3.         <li>  
  4.             <div class="menu_li"><img src="images/coin.png" width="10" /> 网页特效</div>  
  5.             <img class="line" src="images/line.png" width="1">  
  6.             <span>  
  7.                 <img src="images/navbg4.png" width="100%">  
  8.                 <div>  
  9.                 <a href="http://www.freejs.net/fenye.html">分页</a>  
  10.                 <a href="http://www.freejs.net/biaodan.html">表单</a>  
  11.                 <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
  12.                 <a href="http://www.freejs.net/tabbiaoqian.html">TAB标签</a>  
  13.                 </div>  
  14.             </span>  
  15.         </li>  
  16.         <li>  
  17.             <div class="menu_li"><img src="images/coin.png" width="10" /> Freejs.net</div>  
  18.             <img class="line" src="images/line.png" width="1" />  
  19.             <span>  
  20.                 <img src="images/navbg4.png" width="100%" />  
  21.                 <div>  
  22.                 <a href="http://www.freejs.net/fenye.html">分页</a>  
  23.                 <a href="http://www.freejs.net/biaodan.html">表单</a>  
  24.                 <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
  25.                 <a href="http://www.freejs.net/tabbiaoqian.html">TAB标签</a>  
  26.                 </div>  
  27.             </span>  
  28.         </li>  
  29.         <li>  
  30.             <div class="menu_li"><img src="images/coin.png" width="10" /> jquery 特效</div>  
  31.             <span>  
  32.                 <img src="images/navbg5.png" width="100%">  
  33.                 <div>  
  34.                 <a href="http://www.freejs.net/fenye.html">分页</a>  
  35.                 <a href="http://www.freejs.net/biaodan.html">表单</a>  
  36.                 <a href="http://www.freejs.net/daohangcaidan.html">导航菜单</a>  
  37.                 <a href="http://www.freejs.net/tabbiaoqian.html">TAB标签</a>  
  38.                 </div>  
  39.             </span>  
  40.         </li>  
  41.     </ul>  
  42. </div>  

 


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