<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时菜单</title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 12px; }
ul,ol,li{list-style: none;}
#nav{position: absolute; left: 50px; top: 50px;}
.nav-item { width: 80px; height: 30px; background: #09c; color: #fff; border-right: solid 1px #fff; border-bottom: solid 1px #fff; text-align: center; line-height: 30px; }
#subNav{position: absolute; left: 140px; top: 50px; }
.float-layer { width: 200px; height: 120px; background: #ccc; display: none; text-align: center; padding: 20px; }
</style>
<body>
<div id="nav">
<ul>
<li class="nav-item">菜单1</li>
<li class="nav-item">菜单2</li>
<li class="nav-item">菜单3</li>
<li class="nav-item">菜单4</li>
</ul>
</div>
<div id="subNav">
<ul>
<li class="float-layer">弹出层1</li>
<li class="float-layer">弹出层2</li>
<li class="float-layer">弹出层3</li>
<li class="float-layer">弹出层4</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function() {
var aA = getByClass(document,'nav-item');
var aFloatLayer = getByClass(document,'float-layer');
var timer = null;
for (var i = 0; i < aA.length; i++) {
aA[i].index = i;
aA[i].onmouseover = function(){
for (var i = 0; i < aFloatLayer.length; i++) {
aFloatLayer[i].style.display = 'none';
};
aFloatLayer[this.index].style.display = 'block';
}
aA[i].onmouseout = function() {
var This = this;
timer = setTimeout (function(){
aFloatLayer[This.index].style.display = 'none';
},200);
};
aFloatLayer[i].onmouseover = function(){
clearInterval(timer);
}
aFloatLayer[i].onmouseout = function(){
var This = this;
timer = setTimeout (function(){
This.style.display = 'none';
},200);
}
};
function getByClass(oParent, sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var aRes = [];
var re = new RegExp('(^|\\s)' + sClass + '($|\\s)', 'i');
var aEle = oParent.getElementsByTagName('*');
for(var i = 0; i < aEle.length; i++){
if(re.test(aEle[i].className)){
aRes.push(aEle[i]);
}
}
return aRes;
}
}
}
</script>
</body>
</html>
