当前位置:96看吧 > 实用代码 > 导航菜单 > 有下拉菜单的jQuery导航菜单代码

有下拉菜单的jQuery导航菜单代码

时间:2013/07/03
作者:米柚网
来源:米柚网
查看:

导航菜单属于jQuery导航菜单,使用jQuery+css类库实现的导航菜单代码。具有下拉菜单的功能特效,jQuery导航菜单相比flash导航菜单更利于SEO,96看吧推荐企业站使用。

该导航菜单代码使用的是jquery-1.4.2版本,你可以升级更高的版本。

该导航菜单的使用方法:

  1. 按顺序引入style样式代码(也可保存为css文件载入)、jQuery 脚本库、jquery.backgroundpos.js插件文件、及如下的JS代码;
  2. 复制代码到页面中即可。

style核型部分代码(下面代码中第8到第27行是重点):

  1. <style type="text/css">  
  2. * { margin0padding0; }  
  3. ol, ul { list-stylenone; }  
  4. a:link, a:visited, ins { text-decorationnone; }  
  5. img{border:none}  
  6. body { background-color#FFFFFFfont-family"微软雅黑""宋体""黑体"Arial; }  
  7. .header { positionrelativeheight90pxbackgroundurl(images/line-solid.gif) repeat-x bottomwidth960pxmargin0 autoz-index100; }  
  8. .menu { height40pxbackgroundurl(images/menu_bg_1.gif) no-repeat -99px bottomz-index100background-position0px 100%positionabsolute; top: 50px; right: 0padding-right1px; }  
  9. .menu li { floatleftfont-size14pxtext-aligncenterline-height18pxpadding0; }  
  10. .menu li.lihover, .menu li.licurrent { padding-bottom15pxborder-bottom3px solid #FE7700; }  
  11. .menu li a { padding2px 35pxborder-right1px solid #D7D7D7color#242424font-weightboldmargin0border-leftnonedisplay: inline-blockfont-size14pxwidth30px; }  
  12. .menu li a.noborder { border-rightnone; }  
  13. .li_3 { positionrelativez-index100; }  
  14. .li_3 a.noclick { width60px; }  
  15. .li_3_content { positionabsolute; top: 20px; left: 0pxline-height40pxz-index99displaynoneheight188px; *top: 18pxwidth130px; }  
  16. .li_3_content a:hover { color#f18336 !important; }  
  17. .li_3_content dt { height17pxborder-bottom3px solid #FE7700; *height19pxline-height17px; }  
  18. .li_3_content dd { border-left1px solid #E6E4E3border-right1px solid #E6E4E3padding0 8pxbackground#ffffff url(images/menu.gif) no-repeat bottom; }  
  19. .li_3_content dd a { text-aligncenterpadding0border-rightnonecolor#666font-weightnormalwidthauto; }  
  20. .li_3_content dd.lastItem { background-imagenoneborder-bottom1px solid #E6E4E3; }  
  21. .li_3_content dd.lastItem a { border-bottomnone; }  
  22. .miui_logo { positionabsolute; top: 29px; left: 0; }  
  23. .language { positionabsolute; right: 0; top: 10pxline-height20pxheight20pxfont-size12pxcolor#6D6D6Dtext-alignright; }  
  24. .language span { color#A6A6A6padding0 3px; }  
  25. .language a { color#A6A6A6; }  
  26. .language a:hover { text-decorationunderline; }  
  27. </style> 

 

js核心代码:

  1. <script type="text/javascript">  
  2. $(function () {  
  3.     var $menu = $(".menu"), $menuLi = $menu.find("li"), $current = $menu.find('.current'), $li_3 = $menu.find('li.li_3'), $li_3_content = $li_3.find('.li_3_content');  
  4.     $menuLi.hover(function () {  
  5.         var $this = $(this), num = $menuLi.index($this), current = $menuLi.index($(".first")), len = current - num;  
  6.         $menu.css("background-position", (101 * current) + "px" + " bottom");  
  7.         $current.removeClass("lihover");  
  8.         $menuLi.removeClass("first");  
  9.         $this.addClass("first");  
  10.         if (len <= 0) { len = -len; };  
  11.         if (num != 4) {  
  12.             $menu.stop().animate({ backgroundPosition: (101 * num) + "px" + " bottom" }, 100 * len);  
  13.         }  
  14.         else {  
  15.             $menu.stop().animate({ backgroundPosition: (101 * num + 30) + "px" + " bottom" }, 100 * len);  
  16.         }  
  17.     });  
  18.     $li_3.hover(function () {  
  19.         $li_3_content.stop(truetrue).fadeIn(0);  
  20.     }, function () {  
  21.         $li_3_content.fadeOut(500, function () {  
  22.             $li_3_content.css("display""none");  
  23.         });  
  24.     });  
  25.     $menu.mouseleave(function () {  
  26.         var $this = $(this), num = $menuLi.index($this), current = $menuLi.index($current), len = current - num;  
  27.         $menuLi.removeClass("first");  
  28.         $current.addClass("first");  
  29.         if (len <= 0) { len = -len; };  
  30.         $menu.stop().animate({ backgroundPosition: (100 * current + 1) + "px" + " bottom" }, 100 * len);  
  31.     });  
  32.     $("a.noclick").click(function (event) {  
  33.         event.preventDefault();  
  34.     });  
  35. });  
  36. </script> 

 

上一篇:懒人图库jquery导航菜单
下一篇:纯CSS实现竖形导航菜单仿京东网
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
相关最新
相关热门