jQuery 导航菜单

秋子淡无痕

二级导航菜单

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

1. jQuery(document).ready(function(){
   
2.         // 找到所有菜单, 并添加显示和隐藏菜单事件
   
3.         jQuery('#menus > li').each(function(){
   
4.                 jQuery(this).hover(
   
5. 
   
6.                         // 显示菜单
   
7.                         function(){
   
8.                                 jQuery(this).find('ul:eq(0)').show();
   
9.                         },
   
10. 
    
11.                         // 隐藏菜单
    
12.                         function(){
    
13.                                 jQuery(this).find('ul:eq(0)').hide();
    
14.                         }
    
15. 
    
16.                 );
    
17.         });
    
18. });

复制代码

淡出淡入导航菜单

鼠标悬停显示淡入显示菜单, 离开淡出隐藏菜单. 需要加上延迟处理, 原因请参考请参考如下文章.

1. // 线程 IDs
   
2. var mouseover_tid = [];
   
3. var mouseout_tid = [];
   
4. 
   
5. jQuery(document).ready(function(){
   
6.         jQuery('#menus > li').each(function(index){
   
7.                 jQuery(this).hover(
   
8. 
   
9.                         // 取消淡出菜单的线程, 延时淡入菜单
   
10.                         function(){
    
11.                                 var _self = this;
    
12.                                 clearTimeout(mouseout_tid[index]);
    
13.                                 mouseover_tid[index] = setTimeout(function() {
    
14.                                         jQuery(_self).find('ul:eq(0)').fadeIn(200);
    
15.                                 }, 400);
    
16.                         },
    
17. 
    
18.                         // 取消淡入菜单的线程, 延时淡出菜单
    
19.                         function(){
    
20.                                 var _self = this;
    
21.                                 clearTimeout(mouseover_tid[index]);
    
22.                                 mouseout_tid[index] = setTimeout(function() {
    
23.                                         jQuery(_self).find('ul:eq(0)').fadeOut(200);
    
24.                                 }, 400);
    
25.                         }
    
26. 
    
27.                 );
    
28.         });
    
29. });

复制代码

滚动导航菜单

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

1. // 线程 IDs
   
2. var mouseover_tid = [];
   
3. var mouseout_tid = [];
   
4. 
   
5. jQuery(document).ready(function(){
   
6.         jQuery('#menus > li').each(function(index){
   
7.                 jQuery(this).hover(
   
8. 
   
9.                         // 取消卷起菜单的线程, 延时展开菜单
   
10.                         function(){
    
11.                                 var _self = this;
    
12.                                 clearTimeout(mouseout_tid[index]);
    
13.                                 mouseover_tid[index] = setTimeout(function() {
    
14.                                         jQuery(_self).find('ul:eq(0)').slideDown(200);
    
15.                                 }, 400);
    
16.                         },
    
17. 
    
18.                         // 取消展开菜单的线程, 延时卷起菜单
    
19.                         function(){
    
20.                                 var _self = this;
    
21.                                 clearTimeout(mouseover_tid[index]);
    
22.                                 mouseout_tid[index] = setTimeout(function() {
    
23.                                         jQuery(_self).find('ul:eq(0)').slideUp(200);
    
24.                                 }, 400);
    
25.                         }
    
26. 
    
27.                 );
    
28.         });
    
29. });

复制代码

原文: http://www.neoease.com/wordpress-menubar-6/