Skip to main content

前端笔记(二级下拉菜单过渡js)

注意这些标签 ul,js,a。接着出菜单下拉伸缩效果,不带JQ库的话就这么做。

<script>
window.onload=function(){
var aLi=document.getElementsByTagName(‘li’);
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
//鼠标经过一级菜单,二级菜单动画下拉显示出来

var oSubNav=this.getElementsByTagName(‘ul’)[0];
if(oSubNav){
var This=oSubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight+16+”px”;
if(This.offsetHeight>=120)
clearInterval(This.time);
},30)
}

}
//鼠标离开菜单,二级菜单动画收缩起来。
aLi[i].onmouseout=function(){

var oSubNav=this.getElementsByTagName(‘ul’)[0];
if(oSubNav){
var This=oSubNav;
clearInterval(This.time);
This.time=setInterval(function(){
This.style.height=This.offsetHeight+16+”px”;
if(This.offsetHeight>=120)
clearInterval(This.time);
},30)
}

}

}
}
</script>

学习笔记:菜单无限向右扩张

可以照抄一个试试,看看你的屏幕能忍受么。

<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;height:50px;padding-left:30px;border-bottom:5px solid #f60;}
li{float:left;margin-top:20px;}
a{text-decoration:none;display:block;height:30px;line-height:30px;width:100px;background-color:#ccc;margin-bottom:1px;padding-left:10px;text-align:center;}
.on,a:hover{color:#fff;background-color:#f60;height:40px;line-height:40px;margin-top:-10px;}
</style>


<script>
window.onload=function(){
var aA=document.getElementsByTagName(‘a’);
for(var i=0;i<aA.length;i++){
aA[i].onmouseover=function(){
var This=this;
setInterval(function(){
This.style.width=This.offsetWidth+8+”px”;

      })
    }
   }
  }
</script>