js鼠标感应导航菜单切换特效，当用户的鼠标经过菜单时弹出分组下拉菜单，仿QQ分组导航菜单效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿腾讯QQ滑动弹出分组菜单特效_武鸣人</title>
<style type="text/css">
.wuming_ren dl,.wuming_ren dt,.wuming_ren dd{
padding:0;
margin:0;
}
.wuming_ren{
width:240px;
border:1px solid #BFC7D9;
}
.wuming_ren dl{
width:240px;
height:380px;
background:#EDF5FF;
overflow:hidden;
}
.wuming_ren dt{
padding:5px 10px;
height:13px;
font-size:13px;
color:#000;
background:#E5ECF9;
border-top:1px solid #fff;
border-bottom:1px solid #BFC7D9;
}
.wuming_ren dl.on dt{
background:#3366CC;
color:#FFF;
font-weight:bold;
}
.wuming_ren dd{
padding:10px;
color:#333;
font-size:12px;
line-height:1.5em;
}
.wuming_ren dd a:link,
.wuming_ren dd a:visited,
.wuming_ren dd a:hover,
.wuming_ren dd a:active{
color:#333;
display:block;
text-align:right;
}
</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 id="www_wuming_ren" class="wuming_ren">
<dl class="on">
<dt>武鸣人一号菜单</dt>
<dd>一号菜单内容，武鸣人网。<br /><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</dd>
</dl>
<dl>
<dt>武鸣人二号菜单</dt>
<dd>二号菜单内容，武鸣人网。<br /><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</dd>
</dl>
<dl>
<dt>武鸣人三号菜单</dt>
<dd>三号菜单内容，武鸣人网。<br /><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</dd>
</dl>
<dl>
<dt>武鸣人四号菜单</dt>
<dd>四号菜单内容，武鸣人网。<br /><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</dd>
</dl>
<dl>
<dt>武鸣人五号菜单</dt>
<dd>五号菜单内容，武鸣人网。<br /><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布，资源共享合作共赢！</dd>
</dl>
</div>
<script language="javascript">
function slide_wuming_ren(e){
for(var r=document.getElementById(e).getElementsByTagName('dl'),c=clearInterval,i=-1,p=r[0],j; j=r[++i];){
j.style.height=(i?24:379)+'px';
j.onmouseover=function(){clearTimeout(j);var i=this;j=setTimeout(function(){if(p!=i)_(p,379,24)(p=i,24,379)},200)};
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function _(el,f,t){
c(el.$1);el.className=f>t?'':'on';
return el.$1=setInterval(function(){el.style.height=(f+=Math[f>t?'floor':'ceil']((t-f)*.3))+'px';if (f==t)c(el.$1)},10),_
}
};//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
new slide_wuming_ren( "www_wuming_ren");
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处