美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

Jquery无限级下拉菜单

Jquery mihoweb 2633℃ 0评论

今天在弄一个下拉菜单时,在网上发现了一个比人做的比较好的jquery的无限极下拉菜单,效果很不错,分享给大家!废话不多说,看代码….

html代码:

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>dufeng007.cn</title>
  6. <script type=”text/javascript” src=”js/jquery-1.3.2.min.js”></script>
  7. <script type=text/javascript>
  8. $(function(){
  9.     $(‘#webmenu li’).hover(function(){
  10.         $(this).children(‘ul’).stop(true,true).show(‘slow’);
  11.     },function(){
  12.         $(this).children(‘ul’).stop(true,true).hide(‘slow’);
  13.     });
  14.     $(‘#webmenu li’).hover(function(){
  15.         $(this).children(‘div’).stop(true,true).show(‘slow’);
  16.     },function(){
  17.         $(this).children(‘div’).stop(true,true).hide(‘slow’);
  18.     });
  19. });
  20. </script>
  21. <style type=”text/css”>
  22. * {
  23.     margin:0;
  24.     padding:0;
  25. }
  26. body {
  27.     font-family:Arial, Verdana, Helvetica, sans-serif;
  28.     font-family:”雅黑宋体”, “微软雅黑”, “新宋体”, “宋体”;
  29.     font-size:1em;
  30.     font-size:17px;
  31.     color:#FFF;
  32.     background:#050505;
  33.     text-align:left;
  34. }
  35. a {
  36.     color:#FFF;
  37.     text-decoration:none;
  38. }
  39. ul {
  40.     list-style:none;
  41. }
  42. #webmenu {
  43.     height:37px;
  44.     background:#333;
  45.     font-size:1.3em;
  46.     text-align:center;
  47. }
  48. #webmenu a {
  49.     font-size:0.65em;
  50. }
  51. #webmenu li ul {
  52.     display:none;
  53. }
  54. #webmenu li ul li {
  55.     float:none;
  56. }
  57. *html #webmenu li ul li {
  58.     display:inline;
  59. }
  60. #webmenu li ul a {
  61.     float:none;
  62.     height:32px;
  63.     line-height:32px;
  64.     padding:0 10px;
  65.     text-transform:capitalize;
  66. }
  67. #webmenu .height-auto {
  68.     line-height:15px;
  69.     padding:5px 10px;
  70. }
  71. .second-menu, .third-menu, .fourth-menu {
  72.     position:absolute;
  73. }
  74. .first-menu li {
  75.     float:left;
  76.     position:relative;
  77. }
  78. .first-menu a {
  79.     float:left;
  80.     display:block;
  81.     padding:0 20px;
  82.     height:35px;
  83.     line-height:35px;
  84.     background:#333;
  85.     border-top:1px solid #4a4a4a;
  86.     border-left:1px solid #4a4a4a;
  87.     border-bottom:1px solid #242424;
  88.     border-right:1px solid #242424;
  89.     font-size:.7em;
  90. }
  91. .first-menu a:hover {
  92.     background:#4698ca;
  93.     border-top:1px solid #5db1e0;
  94.     border-left:1px solid #5db1e0;
  95. }
  96. .second-menu {
  97.     top:37px;
  98.     right:0;
  99. }
  100. *html .second-menu {
  101.     right:-1px;
  102. }
  103. .second-menu a {
  104.     font-size:11px;
  105. }
  106. .second-menu a.arrow {
  107.     background:#3a3a3a url(image/arrow.gif) no-repeat right top;
  108. }
  109. .second-menu a.arrow:hover {
  110.     background:#4698ca url(image/arrow.gif) no-repeat right -32px;
  111. }
  112. .second-menu a.arrow-02 {
  113.     background:#3a3a3a url(image/arrow.gif) no-repeat right -64px;
  114. }
  115. .second-menu a.arrow-02:hover {
  116.     background:#4698ca url(image/arrow.gif) no-repeat right -110px;
  117. }
  118. .third-menu, .fourth-menu {
  119.     width:177px;
  120.     top:0;
  121.     left:177px;
  122. }
  123. .third-menu a {
  124.     background:#4c4c4c;
  125.     font-weight:normal;
  126.     border-top:1px solid #595959;
  127.     border-left:1px solid #595959;
  128.     border-bottom:1px solid #333;
  129.     border-right:1px solid #333;
  130. }
  131. #subMgm {
  132.     width:177px;
  133. }
  134. #subMgm .third-menu {
  135.     left:177px;
  136. }
  137. #subMgm .fourth-menu {
  138.     left:177px;
  139. }
  140. #subMusic, #subNews {
  141.     width:177px;
  142. }
  143. </style>
  144. </head>
  145. <body>
  146. <ul id=”webmenu” class=”first-menu”>
  147.   <li><a href=”#” target=”_self”>建立网站</a>
  148.     <ul style=”display: none;” id=”subMusic” class=”second-menu”>
  149.       <li><a href=”#” class=”arrow” target=”_self”>域名空间</a>
  150.         <ul class=”third-menu”>
  151.           <li><a href=”http://www.fatcow.com/”>fatcow</a></li>
  152.           <li><a href=”http://www.justhost.com/”>justhost</a></li>
  153.           <li><a href=”http://www.ipower.com/”>ipower</a></li>
  154.           <li><a href=”http://www.inmotionhosting.com/”>inmotion</a></li>
  155.           <li><a href=”http://www.ixwebhosting.com/index.php/v2/pages.dspmain”>ixweb</a></li>
  156.           <li><a href=”http://www.supergreenhosting.com/”>supergreen</a></li>
  157.           <li><a href=”http://www.hostgator.com/”>hostgator</a></li>
  158.           <li><a href=”http://www.powweb.com/”>powweb</a></li>
  159.           <li><a href=”http://www.startlogic.com/”>startlogic</a></li>
  160.           <li><a href=”http://www.greengeeks.com/”>greengeeks</a></li>
  161.         </ul>
  162.       </li>
  163.       <li><a href=”#” class=”arrow” target=”_self”>CSS 模版</a>
  164.         <ul class=”third-menu”>
  165.           <li><a href=”http://www.mezzoblue.com/zengarden/alldesigns/”>zengerden</a></li>
  166.           <li><a href=”http://www.freecsstemplates.org/”>freecsstemplates.org</a></li>
  167.           <li><a href=”http://www.oswd.org/”>oswd.org</a></li>
  168.           <li><a href=”http://www.opendesigns.org/”>opendesigns.org</a></li>
  169.           <li><a href=”http://www.cssplay.co.uk/”>cssplay</a></li>
  170.           <li><a href=”http://www.studiopress.com/”>studiopress</a></li>
  171.           <li><a href=”http://www.styleshout.com/”>styleshout</a></li>
  172.         </ul>
  173.       </li>
  174.       <li><a href=”#” class=”arrow” target=”_self”>CSS 学习</a>
  175.         <ul class=”third-menu”>
  176.           <li><a href=”http://www.x-css.cn/”>ken’s blog</a></li>
  177.           <li><a href=”http://www.ndoherty.com/portfolio/”>ndoherty</a></li>
  178.           <li><a href=”http://www.inlco.cn/”>andy’s blog</a></li>
  179.           <li><a href=”http://www.cssplay.co.uk/”>cssplay</a></li>
  180.         </ul>
  181.       </li>
  182.       <li><a href=”#” class=”arrow” target=”_self”>博客制作</a>
  183.         <ul class=”third-menu”>
  184.         </ul>
  185.       </li>
  186.       <li><a href=”#” class=”arrow” target=”_self”>素材下载</a>
  187.         <ul class=”third-menu”>
  188.           <li><a href=”http://flashden.net/”>flashden.net</a></li>
  189.           <li><a href=”http://www.zcool.com.cn/”>站酷</a></li>
  190.         </ul>
  191.       </li>
  192.       <li><a href=”#” class=”arrow” target=”_self”>管理维护</a>
  193.         <ul class=”third-menu”>
  194.           <li><a href=”http://www.chinaz.com/”>中国站长</a></li>
  195.           <li><a href=”http://www.68design.net/Web-Guide/”>网页设计师联盟</a></li>
  196.           <li><a href=”http://www.blueidea.com/”>蓝色理想</a></li>
  197.           <li><a href=”http://homepage.yesky.com/”>天极网页</a></li>
  198.           <li><a href=”http://learning.artech.cn/”>前沿教室</a></li>
  199.         </ul>
  200.       </li>
  201.     </ul>
  202.   </li>
  203.   <li><a href=”#” target=”_self”>工作生活</a>
  204.     <ul id=”subNews” class=”second-menu”>
  205.       <li><a href=”#” class=”arrow” target=”_self”>搜索</a>
  206.         <ul class=”third-menu”>
  207.           <li><a href=”http://www.baidu.com/”>百度</a></li>
  208.           <li><a href=”http://www.google.cn/”>Google</a></li>
  209.           <li><a href=”http://dir.sogou.com/”>搜狐</a></li>
  210.         </ul>
  211.       </li>
  212.       <li><a href=”#” class=”arrow” target=”_self”>新闻</a>
  213.         <ul class=”third-menu”>
  214.           <li><a href=”http://www.sina.com.cn/”>新浪</a></li>
  215.           <li><a href=”http://www.qq.com/”>腾讯</a></li>
  216.           <li><a href=”http://www.sohu.com/”>搜狐</a></li>
  217.           <li><a href=”http://www.163.com/”>网易</a></li>
  218.           <li><a href=”http://www.ifeng.com/”>凤凰网</a></li>
  219.         </ul>
  220.       </li>
  221.       <li><a href=”#” class=”arrow” target=”_self”>招聘</a>
  222.         <ul class=”third-menu”>
  223.           <li><a href=”http://www.chinahr.com/index.htm”>中华英才网</a></li>
  224.           <li><a href=”http://www.51job.com/”>前程无忧</a></li>
  225.           <li><a href=”http://www.zhaopin.com/”>智联招聘</a></li>
  226.           <li><a href=”http://www.cjol.com/”>中国人才热线</a></li>
  227.           <li><a href=”http://www.01job.cn/”>上海第一招聘</a></li>
  228.           <li><a href=”http://www.528.com.cn/”>528招聘网</a></li>
  229.           <li><a href=”http://www.1010jz.com/”>1010兼职网</a></li>
  230.         </ul>
  231.       </li>
  232.       <li><a href=”#” class=”arrow” target=”_self”>网赚</a>
  233.         <ul class=”third-menu”>
  234.           <li><a href=”http://www.vikecn.com/”>威客中国</a></li>
  235.         </ul>
  236.       </li>
  237.       <li><a href=”#” class=”arrow” target=”_self”>购物</a>
  238.         <ul class=”third-menu”>
  239.           <li><a href=”#” class=”arrow” target=”_self”>网站</a>
  240.             <ul class=”fourth-menu”>
  241.               <li><a href=”http://www.taobao.com/”>淘宝网</a></li>
  242.               <li><a href=”http://www.dangdang.com/”>当当网</a></li>
  243.               <li><a href=”http://www.eachnet.com/”>易趣网</a></li>
  244.               <li><a href=”http://youa.baidu.com/”>百度有啊</a></li>
  245.               <li><a href=”http://www.amazon.cn/”>卓越网</a></li>
  246.               <li><a href=”http://www.paipai.com/”>拍拍网</a></li>
  247.               <li><a href=”http://china.alibaba.com/”>阿里巴巴</a></li>
  248.               <li><a href=”http://www.360buy.com/”>京东商城</a></li>
  249.               <li><a href=”http://www.gumzzi.com/”>锦上添花女装</a></li>
  250.             </ul>
  251.           </li>
  252.           <li><a href=”#” class=”arrow” target=”_self”>快递公司</a>
  253.             <ul class=”fourth-menu”>
  254.               <li><a href=”http://www.sto.cn/”>申通快递</a></li>
  255.               <li><a href=”http://www.yto.net.cn/”>圆通快递</a></li>
  256.               <li><a href=”http://www.ems.com.cn/”>EMS特快专递</a></li>
  257.               <li><a href=”http://www.sf-express.com/”>顺丰快递</a></li>
  258.               <li><a href=”http://www.ttkdex.com/”>天天快递</a></li>
  259.               <li><a href=”http://www.zto.cn/”>中通快递</a></li>
  260.               <li><a href=”http://www.yundaex.com/www/index.html”>韵达快运</a></li>
  261.             </ul>
  262.           </li>
  263.           <li><a href=”#” class=”arrow” target=”_self”>电子支付</a>
  264.             <ul class=”fourth-menu”>
  265.               <li><a href=”https://www.alipay.com/”>支付宝</a></li>
  266.               <li><a href=”https://www.99bill.com/”>快钱</a></li>
  267.               <li><a href=”https://www.tenpay.com/”>财付通</a></li>
  268.               <li><a href=”https://www.paypal.com/c2″>paypal</a></li>
  269.               <li><a href=”https://www.baifubao.com/”>百付宝</a></li>
  270.             </ul>
  271.           </li>
  272.         </ul>
  273.       </li>
  274.       <li><a href=”#” class=”arrow” target=”_self”>科技</a>
  275.         <ul class=”third-menu”>
  276.           <li><a href=”http://www.patent-cn.com/”>专利之家</a></li>
  277.         </ul>
  278.       </li>
  279.     </ul>
  280.   </li>
  281.   <li><a href=”#” class=”arrow” target=”_self”>休闲娱乐</a>
  282.     <ul style=”display: none;” id=”subMgm” class=”second-menu”>
  283.       <li><a href=”#” class=”arrow” target=”_self”>游戏</a>
  284.         <ul class=”third-menu”>
  285.           <li><a href=”#” class=”arrow” target=”_self”>网络游戏</a>
  286.             <ul class=”fourth-menu”>
  287.               <li><a href=”http://wow.163.com/”>魔兽世界</a></li>
  288.               <li><a href=”http://au.9you.com/web_v5/index_top.html”>劲舞团</a></li>
  289.               <li><a href=”http://popkart.tiancity.com/homepage/”>跑跑卡丁车</a></li>
  290.               <li><a href=”http://zt.ztgame.com/”>征途</a></li>
  291.               <li><a href=”http://wd.gyyx.cn/”>问道</a></li>
  292.               <li><a href=”http://ploy.bnb.sdo.com/20070904/web/flash.htm”>泡泡堂</a></li>
  293.               <li><a href=”http://rxjh.17game.com/”>热血江湖</a></li>
  294.               <li><a href=”http://www.fsjoy.com/”>街头篮球</a></li>
  295.               <li><a href=”http://xyq.163.com/”>梦幻西游</a></li>
  296.               <li><a href=”http://speed.qq.com/index.shtml”>QQ飞车</a></li>
  297.               <li><a href=”http://mxd.sdo.com/homepage.htm”>冒险岛</a></li>
  298.               <li><a href=”http://sh.xoyo.com/”>水浒Q传</a></li>
  299.               <li><a href=”http://cf.qq.com/”>穿越火线</a></li>
  300.               <li><a href=”http://tl.changyou.com/”>天龙八部</a></li>
  301.               <li><a href=”http://zhuxian.wanmei.com/”>诛仙</a></li>
  302.               <li><a href=”http://wulin2.wanmei.com/”>武林外传</a></li>
  303.               <li><a href=”http://world2.wanmei.com/”>完美世界</a></li>
  304.               <li><a href=”http://sf.17game.com/index.php”>特种部队</a></li>
  305.               <li><a href=”http://mir2.sdo.com/web/index.html”>热血传奇</a></li>
  306.             </ul>
  307.           </li>
  308.           <li><a href=”http://www.17173.com/”>17173</a></li>
  309.         </ul>
  310.       </li>
  311.       <li><a href=”#” class=”arrow” target=”_self”>电影</a>
  312.         <ul class=”third-menu”>
  313.           <li><a href=”http://www.xunlei.com/”>迅雷看看</a></li>
  314.           <li><a href=”http://www.gougou.com/”>狗狗搜索</a></li>
  315.           <li><a href=”http://www.verycd.com/”>电驴下载</a></li>
  316.           <li><a href=”http://www.80s.cn/”>80s手机电影</a></li>
  317.         </ul>
  318.       </li>
  319.       <li><a href=”#” class=”arrow” target=”_self”>视频</a>
  320.         <ul class=”third-menu”>
  321.           <li><a href=”http://www.youku.com/”>优酷</a></li>
  322.           <li><a href=”http://www.tudou.com/”>土豆</a></li>
  323.           <li><a href=”http://www.ku6.com/”>酷6</a></li>
  324.           <li><a href=”http://6.cn/”>六间房</a></li>
  325.           <li><a href=”http://www.56.com/”>56</a></li>
  326.         </ul>
  327.       </li>
  328.       <li><a href=”#” class=”arrow” target=”_self”>音乐</a>
  329.         <ul class=”third-menu”>
  330.           <li><a href=”http://mp3.baidu.com/”>百度-MP3</a></li>
  331.           <li><a href=”http://www.qq163.com/”>QQ163</a></li>
  332.           <li><a href=”http://www.1ting.com/”>一听音乐</a></li>
  333.         </ul>
  334.       </li>
  335.     </ul>
  336.   </li>
  337. </ul>
  338. </body>
  339. </html>

jquery的版本是 jquery-1.3.2.min.js  前往下载>>

这个是用到的图标。

如果您喜欢这篇文章,欢迎分享订阅。

Incoming search terms:

  • jquery 无限级菜单

转载请注明:美浩工作室官方博客 » Jquery无限级下拉菜单

喜欢 (2)