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

9个月前 (02-24 14:08)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

当用户的鼠标经过主菜单时，会自动弹出二级导航菜单效果，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特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种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_www_wuming_ren,#nav .nav_www_wuming_ren p,#nav .nav_www_wuming_ren p span,#nav .nav_www_wuming_ren .arrow_wuming_ren{background:url(/img/20240224_www_wuming_ren_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_www_wuming_ren{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_www_wuming_ren p{margin-left:10px;padding-right:10px;background-position:right -234px;}
#nav .nav_www_wuming_ren p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;}
#nav .nav_www_wuming_ren p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}
#nav .nav_www_wuming_ren p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}
#nav .nav_www_wuming_ren .arrow_wuming_ren{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)
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function ()
{
var oNav = get.byId("nav");
var aLi = get.byTagName("li", oNav);
var aSubNav = get.byClass("nav_www_wuming_ren", 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_www_wuming_ren", 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)
}
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<!--<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>-->
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="nav">
    <ul>
        <li><a href="https://www.wuming.ren">武鸣人</a></li>
        <li>
            <a href="https://www.wuming.ren">行业资讯</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">业界动态</a>|
                        <a href="https://www.wuming.ren">收购融资</a>|
                        <a href="https://www.wuming.ren">门户动态</a>|
                        <a href="https://www.wuming.ren">搜索引擎</a>|
                        <a href="https://www.wuming.ren">网络游戏</a>|
                        <a href="https://www.wuming.ren">电子商务</a>|
                        <a href="https://www.wuming.ren">广告传媒</a>|
                        <a href="https://www.wuming.ren">厂商开发</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">武鸣人</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">武鸣人</a>|
                        <a href="https://www.wuming.ren">好站推荐</a>|
                        <a href="https://www.wuming.ren">武鸣人</a>|
                        <a href="https://www.wuming.ren">武鸣人</a>|
                        <a href="https://www.wuming.ren">武鸣人</a>|
                        <a href="https://www.wuming.ren">网站排行</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">网站运营</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">建站经验</a>|
                        <a href="https://www.wuming.ren">策划盈利</a>|
                        <a href="https://www.wuming.ren">搜索优化</a>|
                        <a href="https://www.wuming.ren">网站推广</a>|
                        <a href="https://www.wuming.ren">免费资源</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">设计在线</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">酷站推荐</a>|
                        <a href="https://www.wuming.ren">网页设计</a>|
                        <a href="https://www.wuming.ren">WEB标准</a>|
                        <a href="https://www.wuming.ren">视频处理</a>|
                        <a href="https://www.wuming.ren">设计活动</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">网络编程</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">Asp编程</a>|
                        <a href="https://www.wuming.ren">Php编程</a>|
                        <a href="https://www.wuming.ren">.Net编程</a>|
                        <a href="https://www.wuming.ren">Xml编程</a>|
                        <a href="https://www.wuming.ren">Access</a>|
                        <a href="https://www.wuming.ren">Mssql</a>|
                        <a href="https://www.wuming.ren">Mysql</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">联盟资讯</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">联盟动态</a>|
                        <a href="https://www.wuming.ren">联盟介绍</a>|
                        <a href="https://www.wuming.ren">联盟点评</a>|
                        <a href="https://www.wuming.ren">网赚技巧</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="https://www.wuming.ren">服务器</a>
            <div class="nav_www_wuming_ren">
                <em class="arrow_wuming_ren"></em>
                <p>        
                    <span>
                        <a href="https://www.wuming.ren">Web服务器</a>|
                        <a href="https://www.wuming.ren">Ftp服务器</a>|
                        <a href="https://www.wuming.ren">Mail服务器</a>|
                        <a href="https://www.wuming.ren">Dns服务器</a>|
                        <a href="https://www.wuming.ren">Win服务器</a>|
                        <a href="https://www.wuming.ren">Linux服务器</a>|
                        <a href="https://www.wuming.ren">安全防护</a>|
                        <a href="https://www.wuming.ren">虚拟主机</a>
                    </span>
                </p>
            </div>
        </li>        
    </ul>    
</div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/65.html

鼠标感应弹出
回帖

鼠标经过弹出js二级导航菜单 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息