常用js弹出二级导航菜单特效

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

鼠标经过菜单栏弹出一个图层，图层内有二级导航菜单，移开后图层隐藏，实用的一个js弹出二级导航菜单特效。

<!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特效代码。">
<script type="text/javascript"> 
function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function show_www_wuming_ren() { //v3.0
  var i,p,v,obj,args=show_www_wuming_ren.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>
<style type="text/css"> 
BODY{ margin: 0px; background-color: #FFFFFF; font-size: 12px; color: #333333; font-family: 宋体, Arial;}/*网站背景底色*/
a.top:link, a.top:active, a.top:visited
{ display:block;  float:left; height:33px; padding:13px 9px 0px 9px; font-weight: bold; font-size: 14px; color:#ffffff; }/*菜单栏字体的大小及颜色*/
a.top:hover{ font-size: 14x;    text-decoration: none; background:url('/img/20240221_www_wuming_ren_3.jpg') no-repeat center 0px; }/*鼠标指向时菜单栏字体的大小*/
#link_wuming_ren span{ display:block;  float:left;}
.top1{padding-left:20px; width:960px; text-align:center; height:46px; LINE-height:27px; background-image: url('/img/20240221_www_wuming_ren_2.jpg');}
a.tops:link, a.tops:active, a.tops:visited
{ display:block; padding:3px 1px 3px 3px; margin:0px; line-height:1em;  }/*菜单栏字体的大小及颜色*/
a.tops:hover{background-color: #3399cc; color:#fff; text-decoration: none; }/*鼠标指向时菜单栏字体的大小*/
.txl{margin-top:-10px;margin-left:-100px; width:270px; padding-top:10px; Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute;text-align:left;}
.txl1{border: 2px solid #0099CC; background-color:#FFEAB3; padding:0px 0px 0px 0px;width:270px;}
.txl2{float:left;color:#CC3300; width:20px; font-size:14px; font-weight:bold; text-align:center; padding:5px 5px 5px 5px;line-height:1.3em;}
.txl3{float:left;width:240px; background-color:#FFFEEC;height:110px; padding-top:5px;}
.txl4{height:20px;overflow:hidden; padding:0px 0px; width:80px;float:left;}
</style>
</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 align="center" >
<div class="top1">
<div id="link_wuming_ren">
<a href="https://wuming.ren" class="top">首页</a><span><img src="/img/20240221_www_wuming_ren_1.jpg"></span>
<a onMouseOver="show_www_wuming_ren('Layer_2', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_2', '', 'hide');" class="top" href="https://wuming.ren">净水机</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_2 onmouseover="show_www_wuming_ren('Layer_2','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_2','','hide')">
<div class="txl1">
<div class="txl2">净水机</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">爱惠浦净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">百诺肯净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">立升净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">美的净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">银之源净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">水丽净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">安吉尔净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">沁园净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">康丽根净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">怡口净水器</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">霍尼韦尔净水</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">3M净水器</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_8', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_8', '', 'hide');" class="top" href="https://wuming.ren">纯水机</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_8 onmouseover="show_www_wuming_ren('Layer_8','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_8','','hide')">
<div class="txl1">
<div class="txl2">纯水机</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">康富乐纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">美的纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">莫林纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">怡口纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">滨特尔纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">亚都纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">银之源纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">安吉尔纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">沁园纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">世韩纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">凯弗隆纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">康丽根纯水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">爱浦丽纯水机</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_7', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_7', '', 'hide');" class="top" href="https://wuming.ren">软水机</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_7 onmouseover="show_www_wuming_ren('Layer_7','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_7','','hide')">
<div class="txl1">
<div class="txl2">软水机</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">怡口软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">滨特尔软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">恩美特软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">可尔露软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">美的软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">水丽软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">沁园软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">霍尼韦尔软水</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">莫顿软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">史密斯软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">康丽根软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">爱浦丽软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">3m软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">GE软水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">汉斯希尔软水</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_1', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_1', '', 'hide');" class="top" href="https://wuming.ren">前置过滤器</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_1 onmouseover="show_www_wuming_ren('Layer_1','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_1','','hide')">
<div class="txl1">
<div class="txl2">前置过滤器</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">汉斯希尔前置</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">霍尼韦尔前置</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">水丽前置过滤</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">怡口前置过滤</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">浚渡前置过滤</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_14', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_14', '', 'hide');" class="top" href="https://wuming.ren">中央净水机</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_14 onmouseover="show_www_wuming_ren('Layer_14','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_14','','hide')">
<div class="txl1">
<div class="txl2">中央净水机</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">怡口中央净水</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">滨特尔净水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">奔泰中央净水</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">恩美特净水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">百诺肯中央净水机</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">3M中央净水机</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_5', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_5', '', 'hide');" class="top" href="https://wuming.ren">磁性软化器</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_5 onmouseover="show_www_wuming_ren('Layer_5','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_5','','hide')">
<div class="txl1">
<div class="txl2">磁性软化器</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">水丽纳米通</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">美国格玛斯</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">美国水伴侣</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">英国水兔子</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a onMouseOver="show_www_wuming_ren('Layer_12', '', 'show');" onMouseOut="show_www_wuming_ren('Layer_12', '', 'hide');" class="top" href="https://wuming.ren">滤芯/耗材</a>
<span><img src="/img/20240221_www_wuming_ren_1.jpg">
<DIV id=Layer_12 onmouseover="show_www_wuming_ren('Layer_12','','show')" class="txl" onmouseout="show_www_wuming_ren('Layer_12','','hide')">
<div class="txl1">
<div class="txl2">滤芯耗材</div>
<div class="txl3">
<div class="txl4"><a href="https://wuming.ren" class="tops">软水机盐</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">TDS检测笔</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">前置滤瓶 </a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">滤芯耗材</a></div>
<div class="txl4"><a href="https://wuming.ren" class="tops">爱惠浦滤芯</a></div>
<div style="clear:both;"></div>
</div><div style="clear:both;"></div>
</div>
</DIV>
</span>
<a href="https://wuming.ren" class="top al">成功案例</a>
<a href="https://wuming.ren" class="top">净水视频</a><span><img src="/img/20240221_www_wuming_ren_1.jpg"></span>
<a href="https://wuming.ren" class="top">净水课堂</a><span><img src="/img/20240221_www_wuming_ren_1.jpg"></span>
<a href="https://wuming.ren" class="top">购物帮助</a></div>
</div>
</div>
</body>
</html>


赞0
踩0
☆收藏0

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

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

鼠标感应弹出二级菜单
回帖

常用js弹出二级导航菜单特效 期待您的回复！

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

取消确定

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