鼠标经过弹出js二级导航菜单

作者:sky 点击:99 评论:0 发布时间:周五, 11/29/2013 - 23:57 所属分类:导航菜单

当用户的鼠标经过主菜单时，会自动弹出二级导航菜单效果，setTimeout综合应用实例特效，完全支持自定义。

<!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=gb2312" /> <title>站长特效鼠标经过弹出js二级导航菜单站长特效网</title> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <style> body,div,ul,li,p{margin:0;padding:0;} body{font:12px/1.5 Arial;} ul{list-style-type:none;} #nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .nav_wwwzzjsnet,#nav .nav_wwwzzjsnet p,#nav .nav_wwwzzjsnet p span,#nav .nav_wwwzzjsnet .arrow_zzjs_net{background:url(/img/20120410wwwzzjsnet_2.png) no-repeat;} #nav{position:relative;width:910px;background-position:0 -36px;margin:10px auto;} #nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;} #nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;} #nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;} #nav ul li a:hover{font-weight:700;background-position:-3px -144px;} #nav .nav_wwwzzjsnet{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;} #nav .nav_wwwzzjsnet p{margin-left:10px;padding-right:10px;background-position:right -234px;} #nav .nav_wwwzzjsnet p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;} #nav .nav_wwwzzjsnet p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;} #nav .nav_wwwzzjsnet p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;} #nav .nav_wwwzzjsnet .arrow_zzjs_net{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;} </style> <script type="text/javascript"> var get = { byId: function(id) { return document.getElementById(id) }, byClass: function(sClass, oParent) { var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass }, byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem) } };//欢迎来到站长.特效x网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载 window.onload = function () { var oNav = get.byId("nav"); var aLi = get.byTagName("li", oNav); var aSubNav = get.byClass("nav_wwwzzjsnet", oNav); var oSubNav = oEm = timer = null; var i = 0; for (i = 1; i < aLi.length; i++) { aLi[i].onmouseover = function () { //隐藏所有子菜单 for (i = 0; i < aSubNav.length; i++)aSubNav[i].style.display = "none"; //获取该项下的子菜单 oSubNav = get.byClass("nav_wwwzzjsnet", this)[0]; //获取该项下的指示箭头 oEm = get.byTagName("em", this)[0]; //显示该项下的子菜单 oSubNav.style.display = "block"; //判断显示区域 oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ? //如果在显示范围居左显示 oSubNav.style.left = this.offsetLeft + "px" : //超出显示范围居右显示 oSubNav.style.right = 0; //计算指标箭头显示位置 oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px"; clearTimeout(timer); //阻止事件冒泡 oSubNav.onmouseover = function (event) { (event || window.event).cancelBubble = true; clearTimeout(timer) } }; aLi[i].onmouseout = function () { timer = setTimeout(function () { oSubNav.style.display = "none" },300) } } };//欢迎来到站长特效x网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="nav"> <ul> <li><a href="http://www.zzjs.net">站长之家</a></li> <li> <a href="http://www.zzjs.net">行业资讯</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">业界动态</a>| <a href="http://www.zzjs.net">收购融资</a>| <a href="http://www.zzjs.net">门户动态</a>| <a href="http://www.zzjs.net">搜索引擎</a>| <a href="http://www.zzjs.net">网络游戏</a>| <a href="http://www.zzjs.net">电子商务</a>| <a href="http://www.zzjs.net">广告传媒</a>| <a href="http://www.zzjs.net">厂商开发</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">站长在线</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">站长报道</a>| <a href="http://www.zzjs.net">好站推荐</a>| <a href="http://www.zzjs.net">站长聚会</a>| <a href="http://www.zzjs.net">站长访谈</a>| <a href="http://www.zzjs.net">站长茶馆</a>| <a href="http://www.zzjs.net">网站排行</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">网站运营</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">建站经验</a>| <a href="http://www.zzjs.net">策划盈利</a>| <a href="http://www.zzjs.net">搜索优化</a>| <a href="http://www.zzjs.net">网站推广</a>| <a href="http://www.zzjs.net">免费资源</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">设计在线</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">酷站推荐</a>| <a href="http://www.zzjs.net">网页设计</a>| <a href="http://www.zzjs.net">WEB标准</a>| <a href="http://www.zzjs.net">视频处理</a>| <a href="http://www.zzjs.net">设计活动</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">网络编程</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">Asp编程</a>| <a href="http://www.zzjs.net">Php编程</a>| <a href="http://www.zzjs.net">.Net编程</a>| <a href="http://www.zzjs.net">Xml编程</a>| <a href="http://www.zzjs.net">Access</a>| <a href="http://www.zzjs.net">Mssql</a>| <a href="http://www.zzjs.net">Mysql</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">联盟资讯</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">联盟动态</a>| <a href="http://www.zzjs.net">联盟介绍</a>| <a href="http://www.zzjs.net">联盟点评</a>| <a href="http://www.zzjs.net">网赚技巧</a> </span> </p> </div> </li> <li> <a href="http://www.zzjs.net">服务器</a> <div class="nav_wwwzzjsnet"> <em class="arrow_zzjs_net"></em> <p> <span> <a href="http://www.zzjs.net">Web服务器</a>| <a href="http://www.zzjs.net">Ftp服务器</a>| <a href="http://www.zzjs.net">Mail服务器</a>| <a href="http://www.zzjs.net">Dns服务器</a>| <a href="http://www.zzjs.net">Win服务器</a>| <a href="http://www.zzjs.net">Linux服务器</a>| <a href="http://www.zzjs.net">安全防护</a>| <a href="http://www.zzjs.net">虚拟主机</a> </span> </p> </div> </li> </ul> </div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(2)

66.67%

踩一下

(1)

33.33%

标签: