实用js+css滑动门导航菜单

冷不防 2022-09-21 15:27 305阅读 0赞

实用js+css滑动门导航菜单

  1. <html>
  2. <head>
  3. <title>简易实用，滑动门</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css">
  6. *{margin:0;padding:0;}
  7. a:link,a:visited{text-decoration:none;}
  8. a:hover{text-decoration:none;}
  9. ul{list-style:none;}
  10. .subMenu{background:#333;float:left;padding-top:2px;width:100%;}
  11. .subMenu li{float:left;}
  12. .subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
  13. .subMenu .thisStyle a {background:#fff;color:#000;}
  14. .subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;}
  15. .subContent ul{display:none;padding:15px;line-height:180%;}
  16. </style>
  17. </head>
  18. <body>
  19.  <ul class="subMenu">
  20.   <li class="thisStyle"><a href="javascript:void(0)">目录</a></li>
  21.   <li><a href="javascript:void(0)">列表</a></li>
  22.   <li><a href="javascript:void(0)">产品</a></li>
  23.   <li><a href="javascript:void(0)">新网</a></li>
  24.  </ul>
  25.  <div class="subContent">
  26.   <ul style="display:block;">
  27.   <li><a href="#">111111</a></li>
  28.   <li><a href="#">111111</a></li>
  29.   <li><a href="#">111111</a></li>
  30.   <li><a href="#">111111</a></li>
  31.   </ul>
  32.   <ul>
  33.   <li><a href="#">222222</a></li>
  34.   <li><a href="#">222222</a></li>
  35.   <li><a href="#">222222</a></li>
  36.   <li><a href="#">222222</a></li>
  37.   </ul>
  38.   <ul>
  39.   <li><a href="#">333333</a></li>
  40.   <li><a href="#">333333</a></li>
  41.   <li><a href="#">333333</a></li>
  42.   <li><a href="#">333333</a></li>
  43.   </ul>
  44.   <ul>
  45.   <li><a href="#">444444</a></li>
  46.   <li><a href="#">444444</a></li>
  47.   <li><a href="#">444444</a></li>
  48.   <li><a href="#">444444</a></li>
  49.   </ul>
  50.  </div>
  51. <script>
  52. function $_class(name){
  53.  var elements = document.getElementsByTagName("*");
  54.  for(s=0;s<elements.length;s++){
  55.   if(elements[s].className==name){
  56.    return  elements[s];
  57.   } 
  58.  }
  59. }
  60. //tab effects
  61. var tabList = $_class("subMenu").getElementsByTagName("li")
  62.  tabCon = $_class("subContent").getElementsByTagName("ul");
  63. for(i=0;i<tabList.length;i++){
  64.  (function(){
  65.   var t = i;  
  66.   tabList[t].onmouseover = function(){
  67.    for(o=0;o<tabCon.length;o++){
  68.     tabCon[o].style.display = "none";
  69.     tabList[o].className = "";
  70.     if(t==o){
  71.      this.className = "thisStyle";
  72.      tabCon[o].style.display = "block"; 
  73.     }
  74.    }
  75.   } 
  76.  })() 
  77. }
  78. </script>
  79. </bdoy>
  80. </html>

20160624133335379

发表评论

表情：
评论列表 （有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS-滑动门技术

    所谓滑动们技术就是元素内容增加时背景图片也跟着变宽（不会变形），不需要设置盒子的宽，不需要修改背景图大小；想要使用滑动门技术图片要足够宽才行 <!-- 基本 DOM

    迷南。迷南。/ 0 赞/ 141 阅读