当前位置:96看吧 > 实用代码 > 导航菜单 > 懒人图库jquery导航菜单

懒人图库jquery导航菜单

时间:2013/07/01
作者:懒人图库
来源:懒人图库
查看:

懒人图库jquery导航菜单

导航菜单来自懒人图库网,懒人图库使用jquery+css结构实现的导航菜单,兼容IE6,96看吧推荐使用。

该jquery导航菜单使用jQuery类库实现,使用前记得引入该文件。

jQuery的代码核心部分:

  1. $(document).ready(function(){  
  2.     $(".menu li").hover(function(){  
  3.             $(this).addClass("hover");  
  4.             $(this).children("ul li").attr('class','');  
  5.         },function(){  
  6.             $(this).removeClass("hover");    
  7.             $(this).children("ul li").attr('class','');  
  8.         }  
  9.     );   
  10.     $(".menu li.no_sub").hover(function(){  
  11.             $(this).addClass("hover1");  
  12.         },function(){  
  13.             $(this).removeClass("hover1");    
  14.         }  
  15.     );   
  16. }) 

style的核心部分:

  1. /*导航*/ 
  2. .menu{height:32px;font-family:"Microsoft Yahei",Tahoma, Geneva, sans-serif;padding-left:15px;_overflow:hidden}  
  3. .menu a{color:#fff;height:16px;line-height:16px;float:left;position:relative}  
  4. .top{background:#333;position:relative;z-index:2}  
  5. .menu li{font-size:14px;float:left;position:relative;padding:8px 12px;}  
  6. .menu li:hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}  
  7. .menu li:hover a{color:#357d13}  
  8. .menu li.no_sub:hover{border:1px solid #629d2a;padding:7px 11px}  
  9. .menu ul{width:250px;background-color:#fff;border:1px solid #629d2a;border-top:none;position:absolute;left:-1px;top:-999em;z-index:99999;padding:8px;display:none}  
  10. .menu li:hover ul{top:31px;display:block}  
  11. .menu li:hover ul li{font-size:12px;border:none;width:70px;float:left;padding:4px 0 4px 10px}  
  12. .menu li:hover ul li a{color:#333;text-decoration:none;padding:0}  
  13. .menu li:hover ul li a:hover{text-decoration:underline}  
  14. /*IE6*/ 
  15. .menu li.hover{background-color:#fff;border:1px solid #629d2a;border-bottom:none;padding:8px 11px}  
  16. .menu li.hover a{color:#357d13}  
  17. .menu li.hover ul{top:31px;display:block}  
  18. .menu li.hover ul li{border:none;width:70px;float:left;padding:4px 0 4px 10px}  
  19. .menu li.hover ul li a{height:16px;line-height:16px;font-size:12px;color:#333;text-decoration:none;padding:0}  
  20. .menu li.hover ul li a:hover{text-decoration:underline}  
  21. .menu li.no_sub.hover1{border:1px solid #629d2a;padding:7px 11px

 

上一篇:始终悬浮在网页右侧的导航菜单
下一篇:有下拉菜单的jQuery导航菜单代码
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门