二级下拉菜单导航

来源：互联网发布：淘宝怎么评价宝贝编辑：程序博客网时间：2024/04/30 04:51

作为一个前端初学者，一个好的导航菜单往往会吸引很多人去浏览，不仅方便游客，更让网页的布局更让人有一种耳目一新的感觉，好了不说了上代码

<html><head><title>二级下拉菜单</title><style type="text/css" rel="stylesheet">*{margin:0;padding:0;font-size:14px;}ul{list-style:none;}.nav{margin-left:100px;height:30px;width:500px;line-height:30px;}.nav li{float:left;height:30px;width:100px;text-align:center;position:relative;background: #efefef;}.twonav{width:100px;height:0px;position:absolute;top:30px;overflow:hidden;}.twonav li{width:100px;height:30px;background:#ddd}.nav li:hover,.nav li:hover{background-color:#efefef;}</style></head><body><ul class="nav">    <li><a href="">一级菜单</a>       <ul class="twonav">          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>       </ul>         </li> <li><a href="">一级菜单</a>       <ul class="twonav">          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>       </ul>     </li> <li><a href="">一级菜单</a>       <ul class="twonav">          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>          <li><a href="">二级菜单1</a></li>       </ul>     </li>     <li><a href="">一级菜单</a></li>  <li><a href="">一级菜单</a></li> </ul></body></html>

以上是导航布局和修饰部分,以下是js部分

window.onload=function{  var ali=document.getElementsByTagName("li")  for(var i=0;i<ali.length;i++){         ali[i].mouseover=function(){           var aul=this.getElementsByTagName("ul")[0];            if(aul){               var This=aul;               clearsetInterval(This.time);               This.time=setInterval(function(){                 This.style.height=This.offsetHeight+15+"px";                 if(This.offsetHeight>=120px){                   clearsetInterval(This.time);                          }            },30)                    }                                                     }          ali[i].mouseout=function(){             var aul=this.getElementsByTagName("ul")[0];              if(aul){                var This=aul;                 clearInterval(This.time);                 This.time=setInteval(function(){                    This.style.height=This.offsetHeight-16+"px";                     if(This.offsetHeight<=0){                         clearInterval(This.time);                        }               },30)            }        }     } }

以上仅供参考

0 0