<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
color: gray;
}
.clearfix:after,.clearfix:before{
content: "";
height: 0;
display: block;
visibility: hidden;
}
.clearfix:after{
clear: both;
}
.nav{
overflow: hidden;
width: 600px;
height: 200px;
margin: 1em auto;
padding-left: 50px;
}
.classA{
position: relative;
float: left;
border-bottom: 4px solid #ff5d00;
}
.classA .title{
background-color: #efefef;
}
.classA .title li{
padding: 10px 10px;
margin: 0 10px;
cursor: pointer;
}
.classB{
position: absolute;
height: 0px;
overflow: hidden;
background-color: #ddd;
z-index: -1;
}
.classB li{
width: 103px;
height: 40px;
line-height: 40px;
text-align: center;
box-sizing:border-box;
}
</style>
<script>
function addLoadEvent (func){
var oldload = window.onload;
if(typeof oldload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldload();
func();
}
}
}
addLoadEvent(secondClass);
function secondClass (){
var title = document.getElementsByClassName("title");
var classB = document.getElementsByClassName("classB")
var elemtimer = null;
for(var i=0,i_len=title.length;i<i_len;i++){
title[i].index = i;
//鼠标滑过的时候
title[i].onmouseover = function(){
clearInterval(elemtimer);
var elem = classB[this.index];
// clearInterval(elemtimer);
elemtimer = setInterval(function(){
var dist = Math.ceil((160-elem.offsetHeight)/5);
elem.style.height = elem.offsetHeight+dist+"px";
if(elem.offsetHeight>=160){
clearInterval(elemtimer);
}
},20)
}
//鼠标移出的时候
title[i].onmouseout = function(){
document.title = this.index;
clearInterval(elemtimer);
var elem = classB[this.index];
// clearInterval(elemtimer);
elemtimer = setInterval(function(){
var dist = Math.ceil((elem.offsetHeight)/5);
elem.style.height = elem.offsetHeight-dist+"px";
if(elem.offsetHeight<=0){
clearInterval(elemtimer);
}
},20)
}
}
}
</script>
</head>
<body>
<ul class="nav clearfix">
<li>
<ul>
<li>一级菜单0</li>
</ul>
<ul>
<li>二级菜单0-0</li>
<li>二级菜单0-1</li>
<li>二级菜单0-2</li>
<li>二级菜单0-3</li>
</ul>
</li>
<li>
<ul>
<li>一级菜单1</li>
</ul>
<ul>
<li>二级菜单1-0</li>
<li>二级菜单1-1</li>
<li>二级菜单1-2</li>
<li>二级菜单1-3</li>
</ul>
</li>
<li>
<ul>
<li>一级菜单2</li>
</ul>
<ul>
<li>二级菜单2-0</li>
<li>二级菜单2-1</li>
<li>二级菜单2-2</li>
<li>二级菜单2-3</li>
</ul>
</li>
<li>
<ul>
<li>一级菜单3</li>
</ul>
<ul>
<li>二级菜单3-0</li>
<li>二级菜单3-1</li>
<li>二级菜单3-2</li>
<li>二级菜单3-3</li>
</ul>
</li>
<li>
<ul>
<li>一级菜单4</li>
</ul>
<ul>
<li>二级菜单4-0</li>
<li>二级菜单4-1</li>
<li>二级菜单4-2</li>
<li>二级菜单4-3</li>
</ul>
</li>
</ul>
</body>
</html>
添加回答
举报
0/150
提交
取消