首页>>导航菜单>>导航tab，缓慢弹出下拉效果,大型下拉菜单(2017-06-26)

导航tab，缓慢弹出下拉效果,大型下拉菜单

导航tab，缓慢弹出下拉效果,大型下拉菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="nav_menu">  
  2.     <div class="nav">  
  3.         <div class="list" id="navlist_second">  
  4.             <ul>  
  5.                 <li><a href="http://www.freejs.net/">公司概况</a></li>     
  6.                 <li><a href="http://www.freejs.net/">产品展示</a></li>     
  7.                 <li><a href="http://www.freejs.net/">新闻动态</a></li>  
  8.             </ul>  
  9.         </div>  
  10.           
  11.         <div class="box" id="navbox_second" style="height:0px;opacity:0;overflow:hidden;">  
  12.             <div class="cont" style="display:none;">  
  13.                 <ul class="sublist clearfix">  
  14.                       
  15.                       
  16.                       
  17.                     <li>  
  18.                         <h3 class="mcate-item-hd"><span>手机 数码</span></h3>  
  19.                         <p class="mcate-item-bd">  
  20.                             <a href="http://www.freejs.net">手机</a>  
  21.                             <a href="http://www.freejs.net">笔记本</a>  
  22.                             <a href="http://www.freejs.net">相机</a>  
  23.                             <a href="http://www.freejs.net">平板电脑</a>  
  24.                             <a href="http://www.freejs.net">配件</a>  
  25.                             <a href="http://www.freejs.net">电脑硬件</a>  
  26.                         </p>  
  27.                     </li>  
  28.                     <li>  
  29.                         <h3 class="mcate-item-hd"><span>家用电器</span></h3>  
  30.                         <p class="mcate-item-bd">  
  31.                             <a href="http://www.freejs.net">大家电</a>  
  32.                             <a href="http://www.freejs.net">影音电器</a>  
  33.                             <a href="http://www.freejs.net">生活电器</a>  
  34.                             <a href="http://www.freejs.net">厨房电器</a>  
  35.                             <a href="http://www.freejs.net">健康护理</a>  
  36.                             <a href="http://www.freejs.net">剃须刀</a>  
  37.                         </p>  
  38.                     </li>  
  39.   
  40.   
  41.   
  42.                 </ul>  
  43.             </div>  
  44.             <div class="cont" style="display:none;">  
  45.                 <ul class="sublist clearfix">  
  46.                     2  
  47.                 </ul>  
  48.             </div>  
  49.             <div class="cont" style="display:none;">  
  50.                 <ul class="sublist clearfix">  
  51.                     3  
  52.                 </ul>  
  53.             </div>  
  54.         </div>  
  55.     </div>  
  56. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. (function(){  
  3.   
  4.     var time = null;  
  5.     var list = $("#navlist_second");  
  6.     var box = $("#navbox_second");  
  7.     var lista = list.find("a");  
  8.       
  9.     for(var i=0,j=lista.length;i<j;i++){  
  10.         if(lista[i].className == "now"){  
  11.             var olda = i;  
  12.         }  
  13.     }  
  14.       
  15.     var box_show = function(hei){  
  16.         box.stop().animate({  
  17.             height:hei,  
  18.             opacity:1  
  19.         },400);  
  20.     }  
  21.       
  22.     var box_hide = function(){  
  23.         box.stop().animate({  
  24.             height:0,  
  25.             opacity:0  
  26.         },400);  
  27.     }  
  28.       
  29.     lista.hover(function(){  
  30.         lista.removeClass("now");  
  31.         $(this).addClass("now");  
  32.         clearTimeout(time);  
  33.         var index = list.find("a").index($(this));  
  34.         box.find(".cont").hide().eq(index).show();  
  35.         var _height = box.find(".cont").eq(index).height()+54;  
  36.         box_show(_height)  
  37.     },function(){  
  38.         time = setTimeout(function(){     
  39.             box.find(".cont").hide();  
  40.             box_hide();  
  41.         },50);  
  42.         lista.removeClass("now");  
  43.         lista.eq(olda).addClass("now");  
  44.     });  
  45.       
  46.     box.find(".cont").hover(function(){  
  47.         var _index = box.find(".cont").index($(this));  
  48.         lista.removeClass("now");  
  49.         lista.eq(_index).addClass("now");  
  50.         clearTimeout(time);  
  51.         $(this).show();  
  52.         var _height = $(this).height()+54;  
  53.         box_show(_height);  
  54.     },function(){  
  55.         time = setTimeout(function(){         
  56.             $(this).hide();  
  57.             box_hide();  
  58.         },50);  
  59.         lista.removeClass("now");  
  60.         lista.eq(olda).addClass("now");  
  61.     });  
  62.   
  63. })();  
  64. </script>  

 


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