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>

转载于:https://www.cnblogs.com/mayufo/p/4262932.html

js_sl 延迟菜单相关推荐

Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 先来理清思路:1.开发基本的菜单结构 2.开发普通 ...
FLStudio21中文版本全部新功能讲解
万众期待的FL Studio 21版本将于正式发布上线,目前在紧锣密鼓的安排上线中,届时所有购买正版 FL Studio 的用户,都可以免费升级到21版!按照惯例,本次新版也会增加全新插件,来帮助大家 ...
【超详细】FL Studio 21新版更新全解析！80项更新与改进！
FL Studio 21全称Fruity Loops Studio,就是大家熟悉的水果编曲软件,一个全能的音乐制作软件,包括编曲.录音.剪辑和混音等诸多功能,让你的电脑编程一个全能的录音室.FL St ...
2019最新《妙堂Javascript全套项目实战》
第1部分:<JavaScript全套视频课程> 0-妙味课堂原创JavaScript视频教程--JS学前预热课程-1.zip 0-妙味课堂原创JavaScript视频教程--JS学前预热课 ...
超详细的水果FL Studio21最新版更新全功能详细介绍！80项更新与改进！
万众期待的 FL Studio 21 版本将于正式发布上线,目前在紧锣密鼓的安排上线中,届时所有购买正版 FL Studio 的用户,都可以免费升级到21版!按照惯例,本次新版也会增加全新插件,来帮助 ...
水果FLStudio21.0.0软件最新版有哪些新增功能变化？
FL Studio(水果软件)21 引入更快.更精确的音频编辑.改进的内容发现.对 DAW 情绪的控制以及更多鼓舞人心的创意工具.FL Studio是一款功能非常强大的音乐创作编辑软件它就是FL St ...
FLStudio水果编曲软件21.0版本下载及功能详细介绍
昨天为大家展示了 FL STUDIO21 新增的插件,今天让我们看一看还有哪些新变化?稍后我们会放出介绍视频,更动态的展示,请持续关注!FL水果软件自从2018年更新出之后,直到2022年,一直深受国 ...
2023FL Studio最新中文版电子音乐、混音和母带制作DAW
水果具有独特的底层逻辑,其开创了编曲"块"的思维.用FL Studio编曲的流程是在把一个样式编辑好,然后将编辑好的样式当做音频块,在播放列表中像"搭积木"一样 ...
iOS 14的UIMenu和ContextMenu中的新增功能
UIMenu was introduced in iOS 13 to allow easy creation of menus and submenus, which is really handy ...

js_sl 延迟菜单

js_sl 延迟菜单相关推荐

最新文章

热门文章