首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 救急：利用jquery显示各菜单效果？

救急：利用jquery显示各菜单效果？

时间：2009-09-22

来源：互联网

现在要开发一个菜单功能，定制功能需要相当灵活，像菜单横幅显示、竖幅显示。
以后还要加字符分隔符，图片分隔符(这个暂时不考虑)。

我找了很多jquery插件，像superfish，ddsmoothmenu，都不能很好的满足要求。自己写了一个，问题一样多
求救各位帮忙：
复制代码
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <script src="http://127.0.0.1/SysResource/js/public/jquery-1.3.2.js" type="text/javascript"></script>
  5. <!--<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>-->
  6. <style type="text/css">
  7. /*-------------------------------------------------menu-----------------------------------------------*/
  8. .menu{ font-size:16px; padding:0px; margin:0px;}
  9. .menu ul{list-style-type:none;}
  10. .menu ul li{ float:left; line-height:30px;  margin-right:2px; background-color:#457AEA;}
  11. .menu ul li a{display:block; padding:3px 40px; color:#fff; text-decoration:none; }
  12. .menu ul li a:hover{ background-color:#000;}
  13. .menu ul li ul{padding:0px; margin:0px; display:none;}
  14. .menu ul li ul {position:absolute;}
  15. .menu ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}
  16. .menu ul li ul li a{padding:3px 20px;}
  17. .menu ul li ul li ul{padding:0px; margin:0px; display:none;}
  18. .menu ul li ul li ul {position:absolute;}
  19. .menu ul li ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}
  20. .menu ul li ul li ul li a{padding:3px 20px;}
  21. /*-----------------menu1---------------------------------------------------------------------*/
  22. .menu1 { font-size:16px;  padding:0px; margin:0px;}
  23. .menu1 ul{list-style-type:none;}
  24. .menu1 ul li{ float:left; margin-right:2px;}
  25. .menu1 ul li a{
  26.     display:block;
  27.     padding:10px 25px;
  28.     text-decoration:none;
  29.     width:50px;
  30.     background-color:#457AEA;
  31.     color:#fff;
  32.     text-align:center;
  33.     border-bottom:2px solid #1B3F8D;
  34. }
  35. .menu1 ul li a:hover{background-color:#000;}
  36. .menu1 ul li ul{ position:absolute; top:60px; left:110px; display:none;}
  37. .menu1 ul li ul li{ float:none; border-bottom:0px; }
  38. .menu1 ul li ul li a {display:block;  padding:10px 25px; background-color:#1A408B;}
  39. .menu1 ul li ul li a:hover{background-color:#000;}
  40. .menu1 ul li ul li ul{margin-left:-5px;}
  41. .menu1 ul li ul li ul li a{ background-color:#000011; border-bottom:0px;}
  42. .menu1 ul li ul li ul li a:hover{background-color:#358;}
  43. /*--------------------------------menu2-------------------------------------------------------------*/
  44. .menu2{ font-size:16px; padding:0px; margin:0px; }
  45. .menu2 ul{list-style-type:none;}
  46. .menu2 ul li{ line-height:30px; margin-top:2px; }
  47. .menu2 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}
  48. .menu2 ul li a:hover{ background-color:#000;}
  49. .menu2 ul li ul{ position:absolute;  }
  50. .menu2 ul li ul li{ float:left}
  51. .menu2 ul li ul li a{ width:50px; border:0px; background-color:#000;}
  52. .menu2 ul li ul li a:hover{background-color:#356;}
  53. /*--------------------------------menu3-----------------------------------------------------------*/
  54. .menu3{ font-size:16px; padding:0px; margin:0px; }
  55. .menu3 ul{list-style-type:none;}
  56. .menu3 ul li{ line-height:30px; margin-top:2px; }
  57. .menu3 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}
  58. .menu3 ul li a:hover{ background-color:#000;}
  59. .menu3 ul li ul{ position:absolute; left:175px;display:none;}
  60. .menu3 ul li ul li{margin:0px;}
  61. .menu3 ul li ul li a{border:0px; background-color:#1A408B;}
  62. .menu3 ul li ul li a:hover{ background-color:#000;}
  63. </style>
  64. <script>
  65.     var _separatorSettings1 = '1|1|1'.split('|');
  66.     var _separatorSettings2 = '1|0|0'.split('|');
  67.     var _separatorSettings3 = '0|0|0'.split('|');
  68.     $(document).ready(function(){
  69.         //menu1
  70.         $('#previewArea1 ul li').hover(
  71.             function(){
  72.                 var iLevel = 0;
  73.                 $(this).parents().each(function(){
  74.                     if( $(this).attr('id') == 'previewArea1' ){
  75.                         return false;
  76.                     }
  77.                     if( $(this).attr('tagName').toUpperCase() == 'LI' ){
  78.                         iLevel = iLevel + 1;
  79.                     }
  80.                 });
  81.                 SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings1[iLevel]);
  82.                 $(this).children("ul:eq(0)").css({display:'block'})
  83.                 $(this).children("ul:eq(0)").show();
  84.             },
  85.             function(){
  86.                 $(this).children("ul:eq(0)").hide();
  87.             }
  88.         );
  89.         
  90.         //menu2
  91.         $('#previewArea2 ul li').hover(
  92.             function(){
  93.                 var iLevel = 0;
  94.                 $(this).parents().each(function(){
  95.                     if( $(this).attr('id') == 'previewArea2' ){
  96.                         return false;
  97.                     }
  98.                     if( $(this).attr('tagName').toUpperCase() == 'LI' ){
  99.                         iLevel = iLevel + 1;
  100.                     }
  101.                 });
  102.                 SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings2[iLevel]);
  103.                 $(this).children("ul:eq(0)").css({display:'block'})
  104.                 $(this).children("ul:eq(0)").show();
  105.             },
  106.             function(){
  107.                 $(this).children("ul:eq(0)").hide();
  108.             }
  109.         );
  110.         
  111.         //menu3
  112.         $('#previewArea3 ul li').hover(
  113.             function(){
  114.                 var iLevel = 0;
  115.                 $(this).parents().each(function(){
  116.                     if( $(this).attr('id') == 'previewArea3' ){
  117.                         return false;
  118.                     }
  119.                     if( $(this).attr('tagName').toUpperCase() == 'LI' ){
  120.                         iLevel = iLevel + 1;
  121.                     }
  122.                 });
  123.                 SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings3[iLevel]);
  124.                 $(this).children("ul:eq(0)").css({display:'block'})
  125.                 $(this).children("ul:eq(0)").show();
  126.             },
  127.             function(){
  128.                 $(this).children("ul:eq(0)").hide();
  129.             }
  130.         );
  131.     });
  132. function SetChildrenPos(curElement, childElement, curMode){
  133.     var curOffset = $(curElement).offset();
  134.     var curHeight = $(curElement).height();
  135.     var curWidth = $(curElement).width();
  136.     $(childElement).css('top', curOffset.top + curHeight + 'px');
  137.     //$('#pos').html('');
  138.     //$('#pos').append('curElement(left,top):' + curOffset.left + ',' + curOffset.top);
  139.     //$('#pos').append('<br/>curElement(width,height):' + curWidth + ',' + curHeight);
  140.     
  141.     var curParentRightPos = $(curElement).parent('ul:eq(0)').offset().left + $(curElement).parent('ul:eq(0)').width();
  142.     var preChildRightPos = curOffset.left + $(childElement).width();
  143.     if(curMode == '1'){
  144.         if(preChildRightPos > curParentRightPos){
  145.             //var curRightPos = curOffset.left + curWidth;
  146.             //$(childElement).css('left', curParentRightPos - $(childElement).width() + 'px');
  147.             $(childElement).css('left', curOffset.left + 'px');
  148.         }
  149.         else{
  150.             $(childElement).css('left', curOffset.left + 'px');
  151.         }
  152.     }
  153.     else{
  154.         $(childElement).css('top', curOffset.top + 'px');
  155.         $(childElement).css('left', curOffset.left + curWidth + 'px');
  156.     }
  157. }
  158. </script>
  159. </head>
  160. <body>
  161. <div id="pos"></div>
  162. <div id="previewArea1" class="menu">
  163.     <ul>
  164.         <li><a href="#">1MENU1</a></li>
  165.         <li><a href="#">1MENU2</a>
  166.             <ul>
  167.                 <li><a href="#">1MENU2.1</a></li>
  168.                 <li><a href="#">1MENU2.2</a></li>
  169.                 <li><a href="#">1MENU2.3</a>
  170.                 <ul>
  171.                     <li><a href="">1MENU2.3.1</a></li>
  172.                     <li><a href="">1MENU2.3.2</a></li>
  173.                 </ul>
  174.                 </li>
  175.                 <li><a href="#">1MENU2.4</a></li>
  176.             </ul>
  177.         </li>
  178.         <li><a href="#">1MENU3</a></li>
  179.         <li><a href="#">1MENU4</a>
  180.             <ul>
  181.                 <li><a href="#">1MENU4.1</a></li>
  182.                 <li><a href="#">1MENU4.2</a></li>
  183.                 <li><a href="#">1MENU4.3</a>
  184.                 <ul>
  185.                     <li><a href="">1MENU4.3.1</a></li>
  186.                     <li><a href="">1MENU4.3.2</a></li>
  187.                 </ul>
  188.                 </li>
  189.                 <li><a href="#">1MENU4.4</a></li>
  190.             </ul>
  191.         </li>
  192.     </ul>
  193. </div>
  194. <br style="float:clear;" />
  195. <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  196. <div id="previewArea2" class="menu1">
  197.     <ul>
  198.         <li><a href="#">2MENU1</a></li>
  199.         <li><a href="#">2MENU2</a>
  200.             <ul>
  201.                 <li><a href="#">2MENU2.1</a></li>
  202.                 <li><a href="#">2MENU2.2</a></li>
  203.                 <li><a href="#">2MENU2.3</a>
  204.                 <ul>
  205.                     <li><a href="">2MENU2.3.1</a></li>
  206.                     <li><a href="">2MENU2.3.2</a></li>
  207.                 </ul>
  208.                 </li>
  209.                 <li><a href="#">2MENU2.4</a></li>
  210.             </ul>
  211.         </li>
  212.         <li><a href="#">2MENU3</a></li>
  213.         <li><a href="#">2MENU4</a>
  214.             <ul>
  215.                 <li><a href="#">2MENU4.1</a></li>
  216.                 <li><a href="#">2MENU4.2</a></li>
  217.                 <li><a href="#">2MENU4.3</a>
  218.                 <ul>
  219.                     <li><a href="">2MENU4.3.1</a></li>
  220.                     <li><a href="">2MENU4.3.2</a></li>
  221.                 </ul>
  222.                 </li>
  223.                 <li><a href="#">2MENU4.4</a></li>
  224.             </ul>
  225.         </li>
  226.     </ul>
  227. </div>
  228. <br style="float:clear;" />
  229. <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  230. <div id="previewArea3" class="menu3">
  231.     <ul>
  232.         <li><a href="#">3MENU1</a></li>
  233.         <li><a href="#">3MENU2</a>
  234.             <ul>
  235.                 <li><a href="#">3MENU2.1</a></li>
  236.                 <li><a href="#">3MENU2.2</a></li>
  237.                 <li><a href="#">3MENU2.3</a>
  238.                 <ul>
  239.                     <li><a href="">3MENU2.3.1</a></li>
  240.                     <li><a href="">3MENU2.3.2</a></li>
  241.                 </ul>
  242.                 </li>
  243.                 <li><a href="#">3MENU2.4</a></li>
  244.             </ul>
  245.         </li>
  246.         <li><a href="#">3MENU3</a></li>
  247.         <li><a href="#">3MENU4</a>
  248.             <ul>
  249.                 <li><a href="#">3MENU4.1</a></li>
  250.                 <li><a href="#">3MENU4.2</a></li>
  251.                 <li><a href="#">3MENU4.3</a>
  252.                 <ul>
  253.                     <li><a href="">3MENU4.3.1</a></li>
  254.                     <li><a href="">3MENU4.3.2</a></li>
  255.                 </ul>
  256.                 </li>
  257.                 <li><a href="#">3MENU4.4</a></li>
  258.             </ul>
  259.         </li>
  260.     </ul>
  261. </div>
  262. <br style="float:clear;" />
  263. <br/><br/><br/><br/><br/><br/><br/><br/><br/>
  264. </body>
  265. </html>

作者: net205   发布时间: 2009-09-22

第一个菜单的三级子菜单显示位置有问题
第二个菜单的二级子菜单偏右了，三级子菜单显示位置也有问题
第三个菜单更惨

作者: net205   发布时间: 2009-09-22

说明：去掉第4行
把第5行的注释去掉，用google上的jquery文件

作者: net205   发布时间: 2009-09-22

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net