现在的位置: 首页 > 综合 > 正文

CSS+JS实现兼容性很好的无限级下拉菜单

2018年04月09日 ⁄ 综合 ⁄ 共 4818字 ⁄ 字号 小 中 大 ⁄ 评论关闭 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
  3. <head> 
  4. <title>CSS+JS实现兼容性很好的无限级下拉菜单</title> 
  5. <style type="text/css"> 
  6. *{ margin:0; padding:0; border:0;} 
  7. body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;} 
  8. .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;} 
  9. a:link{ color:#000; text-decoration:none; } 
  10. a:visited{ color:#000; text-decoration:none; } 
  11. a:hover{ color:#000; text-decoration:none; } 
  12. .menu{ width:778px; height:26px; background:#fff; margin:0 auto;} 
  13. .menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;} 
  14. .menusel h2{ font-size:12px; } 
  15. .menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;} 
  16. .menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;} 
  17. .ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; } 
  18. .position{ position:absolute; z-index:1;} 
  19. .menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;} 
  20. .menusel .block{ display:block;} 
  21. .typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; } 
  22. .typeul li a{ border:none;width:125px; } 
  23. .typeul li a:hover{ border:none; background:#ddd;} 
  24. .typeul{  margin-left:0;  } 
  25. .typeul ul{left:125px; top:0; position:absolute;} 
  26. .fli{ margin-left: -1px; border-left:#eeeeee solid 1px;} 
  27. .menusel .lli{ border:none; } 
  28. </style> 
  29. <script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script><!-- IE6背景图片闪烁问题  --> 
  30. </head> 
  31. <body> 
  32. <div class="menu"> 
  33.  <div id="menu1" class="menusel"> 
  34.   <h2><a href="/">菜单1</a></h2> 
  35.    <div class="position"> 
  36.     <ul class="clearfix typeul"> 
  37.      <li><a href="http://www.33567.cn">菜单选项1-2</a></li> 
  38.      <li> 
  39.       <a href="#">菜单选项1-2</a> 
  40.       <ul> 
  41.        <li class="fli"><a href="#">菜单选项1-2-1</a></li> 
  42.        <li class="lli"><a href="#">菜单选项1-2-2</a></li> 
  43.       </ul> 
  44.      </li> 
  45.      <li><a href="http://www.7caidy.com">菜单选项1-2</a></li> 
  46.      <li class="lli"><a href="#">菜单选项1-2</a></li> 
  47.     </ul> 
  48.    </div><!-- position --> 
  49.   </div><!-- menusel --> 
  50.   <div id="menu2" class="menusel"> 
  51.   <h2><a href="#">菜单2</a></h2> 
  52.   <div class="position"> 
  53.   <ul class="clearfix typeul"> 
  54.   <li><a href="#">菜单选项2-2</a></li> 
  55.   <li><a href="#">菜单选项2-2</a> 
  56.   <ul> 
  57.   <li class="fli"><a href="#">菜单选项2-2-1</a></li> 
  58.   <li class="lli"><a href="#">菜单选项2-2-2</a> 
  59.   <ul> 
  60.   <li class="fli"><a href="#">菜单选项2-2-1</a></li> 
  61.   <li class="lli"><a href="#">菜单选项2-2-2</a> 
  62.   </li> 
  63.   </ul> 
  64.   </li> 
  65.   </ul> 
  66.   </li> 
  67.   <li><a href="#">菜单选项2-2</a></li> 
  68.   <li class="lli"><a href="#">菜单选项2-2</a></li> 
  69.   </ul> 
  70.   </div><!-- position --> 
  71.   </div><!-- menusel --> 
  72.   <div id="menu3" class="menusel"> 
  73.   <h2><a href="#">菜单3</a></h2> 
  74.   <div class="position"> 
  75.   <ul class="clearfix typeul"> 
  76.   <li><a href="#">菜单选项3-2</a></li> 
  77.   <li><a href="#">菜单选项3-2</a> 
  78.   <ul> 
  79.   <li class="fli"><a href="#">菜单选项3-2-1</a></li> 
  80.   <li class="lli"><a href="#">菜单选项3-2-2</a> 
  81.   <ul> 
  82.   <li class="fli"><a href="#">菜单选项3-2-1</a></li> 
  83.   <li class="lli"><a href="#">菜单选项3-2-2</a> 
  84.   <ul> 
  85.   <li class="fli"><a href="#">菜单选项3-2-1</a></li> 
  86.   <li class="lli"><a href="#">菜单选项3-2-2</a></li> 
  87.   </ul> 
  88.   </li> 
  89.   </ul> 
  90.   </li> 
  91.   </ul> 
  92.   </li> 
  93.   <li><a href="#">菜单选项3-2</a></li> 
  94.   <li class="lli"><a href="#">菜单选项3-2</a></li> 
  95.   </ul> 
  96.   </div><!-- position --> 
  97.  </div><!-- menusel --> 
  98. </div><!-- menu --> 
  99.  <script type="text/javascript"> 
  100.  for(var x = 1; x < 4; x++) 
  101.  { 
  102.  var menuid = document.getElementById("menu"+x); 
  103.  menuid.num = x; 
  104.  type(); 
  105.  } 
  106.  function type() 
  107.  { 
  108.  var menuh2 = menuid.getElementsByTagName("h2"); 
  109.  var menuul = menuid.getElementsByTagName("ul"); 
  110.  var menuli = menuul[0].getElementsByTagName("li"); 
  111.  menuh2[0].onmouseover = show; 
  112.  menuh2[0].onmouseout = unshow; 
  113.  menuul[0].onmouseover = show; 
  114.  menuul[0].onmouseout = unshow; 
  115.  function show() 
  116.  { 
  117.  menuul[0].className = "clearfix typeul block" 
  118.  } 
  119.  function unshow() 
  120.  { 
  121.  menuul[0].className = "typeul" 
  122.  } 
  123.  for(var i = 0; i < menuli.length; i++) 
  124.   { 
  125.   menuli[i].num = i; 
  126.   var liul = menuli[i].getElementsByTagName("ul")[0]; 
  127.    if(liul) 
  128.    { 
  129.    typeshow() 
  130.    } 
  131.   } 
  132.  function typeshow() 
  133.  { 
  134.  menuli[i].onmouseover = showul; 
  135.  menuli[i].onmouseout = unshowul; 
  136.  } 
  137.  function showul() 
  138.  { 
  139.  menuli[this.num].getElementsByTagName("ul")[0].className = "block"; 
  140.  } 
  141.  function unshowul() 
  142.  { 
  143.  menuli[this.num].getElementsByTagName("ul")[0].className = ""; 
  144.  } 
  145.  } 
  146.  </script> 
  147. </body> 
  148. </html> 
  149.  

 

本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/815559

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞