您的位置：首页 > Web前端 > JavaScript

延迟菜单实现

2016-05-26 12:43 441 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>延迟菜单</title>

<link rel="stylesheet" type="text/css" href="miaov_style.css">

<script>

window.onload = function(){

var aA = getByClass(document,'normal');
var aSpan = 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<aSpan.length;i++){
aSpan[i].style.display = 'none';
}

aSpan[this.index].style.display = 'block';

clearInterval(timer);
};

aA[i].onmouseout = function(){

var This = this;

timer = setTimeout(function(){

aSpan[This.index].style.display = 'none';

},1000);

};

aSpan[i].onmouseover = function(){

clearInterval(timer);

};

aSpan[i].onmouseout = function(){

var This = this;

timer = setTimeout(function(){

This.style.display = 'none';

},1000);

};
}

function getByClass(oParent,sClass){
var aEle = oParent.getElementsByTagName('*');
var result = [];
var re = new RegExp('\\b' + sClass + '\\b','i');

for(var i=0;i<aEle.length;i++){
if(re.test(aEle[i].className)){
result.push(aEle[i]);
}
}

return result;
}

};

</script>

</head>

<body>

<div id="nav">

<div class="adorn1"></div>

<div class="adorn2"></div>

<ul>

<li>

<a class="normal" href="http://www.miaov.com">首页</a>









<a href="http://www.miaov.com">最近更新</a>

<a href="http://www.miaov.com">活动</a>

<a href="http://www.miaov.com">报名试听</a>

<a href="http://www.miaov.com">学员反馈</a>



</li>

<li class="line">

<a class="normal" href="http://www.miaov.com">关于我们</a>









<a href="http://www.miaov.com">妙味讲师</a>

<a href="http://www.miaov.com">培训方式</a>

<a href="http://www.miaov.com">培训理念</a>

<a href="http://www.miaov.com">联系我们</a>



</li>

<li class="line">

<a class="normal" href="http://www.miaov.com">作品</a>









<a href="http://www.miaov.com">般固</a>

<a href="http://www.miaov.com">MATRIX</a>

<a href="http://www.miaov.com">留学e网</a>

<a href="http://www.miaov.com">ECMall</a>



</li>

<li class="line">

<a class="normal" href="http://www.miaov.com">博客</a>









<a href="http://www.miaov.com">JS教程</a>

<a href="http://www.miaov.com">弹出层效果</a>

<a href="http://www.miaov.com">3D球面标签云</a>

<a href="http://www.miaov.com">Window计算器</a>



</li>

</ul>
<a href="http://www.miaov.com">>>更多</a>

</div>

</body>
</html>

m
4000
iaov_style.css

* { padding: 0; margin: 0; }

li { list-style: none; }

#nav { width: 500px; height: 36px; padding: 0 10px; background: url(images/nav_bg.gif) repeat-x; margin: 50px auto 0; position: relative; }

#nav .adorn1 { width: 6px; height: 36px; background: url(images/nav_bg.gif) no-repeat 0 -36px; position: absolute; top: 0; left: 0; }

#nav .adorn2 { width: 6px; height: 36px; background: url(images/nav_bg.gif) no-repeat 0 -72px; position: absolute; top: 0; right: 0; }

#nav li { float: left; height: 36px; padding: 0 3px 0 7px; position: relative; cursor: pointer; }

#nav .line { background: url(images/active_bg.gif) no-repeat 0 -90px; }

#nav .active { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff; background: url(images/active_bg.gif) no-repeat right -40px; }

#nav .active span { float: left; height: 36px; line-height: 36px; font-size: 14px; padding: 0 20px; text-decoration: none; color: #fff; background: url(images/active_bg.gif) no-repeat 0 5px; }

#nav .normal { float: left; height: 36px; line-height: 36px; font-size: 14px; text-decoration: none; color: #fff; }

#nav .normal span { float: left; height: 36px; padding: 0 20px; }

#nav .normal:hover { background: url(images/active_bg.gif) no-repeat right -40px; }

#nav .normal:hover span { background: url(images/active_bg.gif) no-repeat 0 5px; }

#nav .float_layer { height: 27px; color: #235e99; padding: 0 10px; background: url(images/nav_bg.gif) repeat-x 0 -162px; position: absolute; top: 46px; display: none; }

#nav .arrows { width: 7px; height: 5px; overflow: hidden; background: url(images/active_bg.gif) no-repeat 0 -190px; position: absolute; top: -4px; }

#nav .decorate1 { width: 6px; height: 27px; background: url(images/nav_bg.gif) no-repeat 0 -108px; position: absolute; top: 0; left: -6px; }

#nav .decorate2 { width: 6px; height: 27px; background: url(images/nav_bg.gif) no-repeat 0 -135px; position: absolute; top: 0; right: -6px; }

#nav .float_layer a { float: left; height: 27px; line-height: 22px; font-size: 12px; color: #235e99; text-decoration: none; background: url(images/active_bg.gif) no-repeat right -207px; padding: 0 8px; }

#nav .float_layer a span { float: left; height: 18px; padding-top: 3px; overflow: hidden; border-bottom: 2px solid #cedce8; }

#nav .float_layer a:hover span { border-bottom: 2px solid #235e99; }

#nav p { position: absolute; top: 10px; right: 20px; }

#nav p a { color: #fff; font-size: 14px; text-decoration: none; }

#nav p a:hover { text-decoration: underline; }

.pos1 { left: 0; }

.pos1 .arrows { left: 36px; }

.w1 { width: 245px; }

.pos2 { left: 0; }

.pos2 .arrows { left: 50px; }

.w2 { width: 260px; }

.pos3 { left: -100px; }

.pos3 .arrows { left: 136px; }

.w3 { width: 230px; }

.pos4 { left: -100px; }

.pos4 .arrows { left: 136px; }

.w4 { width: 310px; }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript html css

相关文章推荐

新的分享

章节导航