这是网站后台常用的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" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现后台常用折叠菜单特效_武鸣人</title>
<script type="text/javascript">
function menu_wumingren(id,onlyone){
if(!document.getElementById || !document.getElementsByTagName){return false;}
this.menu=document.getElementById(id);
this.submenu=this.menu.getElementsByTagName("ul");
this.speed=3;
this.time=10;
this.onlyone=onlyone==true?onlyone:false;
this.links = this.menu.getElementsByTagName("a");
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
menu_wumingren.prototype.init=function(){
var mainInstance = this;
for(var i=0;i<this.submenu.length;i++){
this.submenu[i].getElementsByTagName("span")[0].onclick=function(){
mainInstance.toogleMenu(this.parentNode);
};
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
for(var i=0;i<this.links.length;i++){
this.links[i].onclick=function(){
this.className = "current";
mainInstance.removeCurrent(this);
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
menu_wumingren.prototype.removeCurrent = function(link){
for (var i = 0; i < this.links.length; i++){
if (this.links[i] != link){
this.links[i].className = " ";
}
}
}
menu_wumingren.prototype.toogleMenu=function(submenu){
if(submenu.className=="open"){
this.closeMenu(submenu);
}else{
this.openMenu(submenu);
}
}
menu_wumingren.prototype.openMenu=function(submenu){
var fullHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++){
fullHeight += links[i].offsetHeight;
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var moveBy = Math.round(this.speed * links.length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight <fullHeight){
submenu.style.height = newHeight + "px";
}else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "open";
}
}, this.time);
this.collapseOthers(submenu);
}
menu_wumingren.prototype.closeMenu=function(submenu){
var minHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight){
submenu.style.height = newHeight + "px";
}else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
}
}, this.time);
}
menu_wumingren.prototype.collapseOthers = function(submenu){
if(this.onlyone){
for (var i = 0; i < this.submenu.length; i++){
if (this.submenu[i] != submenu){
this.closeMenu(this.submenu[i]);
}
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
<style type="text/css">
*{margin:0;padding:0;}
.menu_wumingren{border:1px solid #000;width:150px;margin:50px;}
.menu_wumingren ul{list-style-type:none;height:25px;line-height:25px;overflow:hidden;cursor:pointer;}
.menu_wumingren ul.open{height:auto;}
.menu_wumingren ul span{display:block;padding-left:5px}
.menu_wumingren ul li{border-bottom:1px solid #DDDDDD;}
.menu_wumingren li a{background-color:#EEEEEE;color:#006666;display:block;padding:5px 10px;text-decoration:none;text-align:center;}
.menu_wumingren li a:hover{background-color:#006666;color:#ffffff;}
.menu_wumingren li a.current{background-color:#006666;color:#ffffff;}
</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="menu_wumingren" class="menu_wumingren" style="float:left;">
<ul class="open">
<span>武鸣人一号</span>
<li><a href="https://www.wuming.ren">武鸣一号特效</a></li>
<li><a href="https://www.wuming.ren">武鸣二号特效</a></li>
</ul>
<ul>
<span>武鸣人二号</span>
<li><a href="https://www.wuming.ren">武鸣三号特效</a></li>
<li><a href="https://www.wuming.ren">武鸣四号特效</a></li>
<li><a href="https://www.wuming.ren">武鸣五号特效</a></li>
</ul>
<ul>
<span>武鸣人三号</span>
<li><a href="https://www.wuming.ren">武鸣六号特效</a></li>
<li><a href="https://www.wuming.ren">武鸣七号特效</a></li>
</ul>
</div>
<div id="menu2_wumingren" class="menu_wumingren" style="float:right;">
<ul class="open">
<span>武鸣人四号</span>
<li><a href="https://www.wuming.ren">一号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">二号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">三号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">四号武鸣人 网</a></li>
</ul>
<ul>
<span>武鸣人五号</span>
<li><a href="https://www.wuming.ren">五号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">六号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">七号武鸣人 网</a></li>
</ul>
<ul>
<span>武鸣人六号</span>
<li><a href="https://www.wuming.ren">八号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">九号武鸣人 网</a></li>
<li><a href="https://www.wuming.ren">十号武鸣人 网</a></li>
</ul>
<ul>
<span>武鸣人七号</span>
<li><a href="https://www.wuming.ren">欢迎来到这里</a></li>
<li><a href="https://www.wuming.ren">武鸣人网站</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function() {
myMenu = new menu_wumingren("menu_wumingren",true);
myMenu.init();
myMenu2 = new menu_wumingren("menu2_wumingren");
myMenu2.init();
};
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处