首页 > 代码库 > js_sl 延迟菜单
js_sl 延迟菜单
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>* { padding: 0; margin: 0; }li { list-style: none; }#nav { width: 500px; height: 36px; padding: 0 10px; background: url(img/nav_bg.gif) repeat-x; margin: 50px auto 0; position: relative; }#nav .adorn1 { width: 6px; height: 36px; background: url(img/nav_bg.gif) no-repeat 0 -36px; position: absolute; top: 0; left: 0; }#nav .adorn2 { width: 6px; height: 36px; background: url(img/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(img/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(img/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(img/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(img/active_bg.gif) no-repeat right -40px; }#nav .normal:hover span { background: url(img/active_bg.gif) no-repeat 0 5px; }#nav .float_layer { height: 27px; color: #235e99; padding: 0 10px; background: url(img/nav_bg.gif) repeat-x 0 -162px; position: absolute; top: 46px; display: none; }#nav .arrows { width: 7px; height: 5px; overflow: hidden; background: url(img/active_bg.gif) no-repeat 0 -190px; position: absolute; top: -4px; }#nav .decorate1 { width: 6px; height: 27px; background: url(img/nav_bg.gif) no-repeat 0 -108px; position: absolute; top: 0; left: -6px; }#nav .decorate2 { width: 6px; height: 27px; background: url(img/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(imgs/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; }</style><script>window.onload = function (){ var oa = getByClass(document,‘normal‘); var ospan = getByClass(document,‘float_layer‘); var timer = null; for(var i = 0; i < oa.length; i++) { oa[i].index = i; oa[i].onmouseover = function () { for(var i = 0; i < ospan.length; i++) { ospan[i].style.display = ‘none‘; } ospan[this.index].style.display = ‘block‘; clearInterval(timer); } oa[i].onmouseout = function () { var This = this; timer = setInterval(function () { ospan[This.index].style.display = ‘none‘; },1000); } ospan[i].onmouseover = function () { clearInterval(timer); } ospan[i].onmouseout = function () { var This = this; timer = setInterval(function(){ This.style.display = ‘none‘; },1000); } } function getByClass(oparent,sclass) { var aele = oparent.getElementsByTagName(‘*‘); var result = []; var re = RegExp(‘\\b‘+ sclass +‘\\b‘); 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"><span>首页</span></a> <span class="float_layer w1 pos1"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>最近更新</span></a> <a href="http://www.miaov.com"><span>活动</span></a> <a href="http://www.miaov.com"><span>报名试听</span></a> <a href="http://www.miaov.com"><span>学员反馈</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>关于我们</span></a> <span class="float_layer w2 pos2"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>妙味讲师</span></a> <a href="http://www.miaov.com"><span>培训方式</span></a> <a href="http://www.miaov.com"><span>培训理念</span></a> <a href="http://www.miaov.com"><span>联系我们</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>作品</span></a> <span class="float_layer w3 pos3"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>般固</span></a> <a href="http://www.miaov.com"><span>MATRIX</span></a> <a href="http://www.miaov.com"><span>留学e网</span></a> <a href="http://www.miaov.com"><span>ECMall</span></a> </span> </li> <li class="line"> <a class="normal" href="http://www.miaov.com"><span>博客</span></a> <span class="float_layer w4 pos4"> <span class="arrows"></span> <span class="decorate1"></span> <span class="decorate2"></span> <a href="http://www.miaov.com"><span>JS教程</span></a> <a href="http://www.miaov.com"><span>弹出层效果</span></a> <a href="http://www.miaov.com"><span>3D球面标签云</span></a> <a href="http://www.miaov.com"><span>Window计算器</span></a> </span> </li> </ul> <p><a href="http://www.miaov.com">>>更多</a></p></div></body></html>
js_sl 延迟菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。