一款漂亮的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>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;text-align:center;}
a:link,a:visited{text-decoration:none;}
/*菜单个性设置*/
.www_wuming_ren{width:204px;height:100%;margin:0 auto;height:100%;background:url() repeat-y left top;}
.www_wuming_ren ul{list-style:none;text-align:left;}
.www_wuming_ren h2{width:204px;margin:0 auto;height:33px;background:#FFF url() no-repeat left top;text-indent:-9999px;}
/*一级菜单*/
.menu li.wuming_ren a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(/img/20240510_www_wuming_ren_1.gif) no-repeat left top;}
/*一级菜单两态样式,供JS调用*/
.menu li.wuming_ren a.hove{background-position:left -31px;}
.menu li.wuming_ren a.cur{background-position:left -62px;}
/*二级菜单*/
.menu li ul{padding-left:10px;}
.menu li ul._wuming_ren{width:180px;display:none;}
.menu li ul._wuming_ren li{height:26px;line-height:26px;}
.menu li ul._wuming_ren li a{display:block;height:26px;line-height:26px;background:#E7E3E7 url() no-repeat 30px center;padding-left:50px;color:#42556B;border-top:1px #B8C2CB solid;overflow:hidden;}
/*二级菜单两态样式,供JS调用*/
.menu li ul._wuming_ren li a.hove1{background:#F6F6F6 url() no-repeat 30px center;}
</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>
<!--把下面代码加到<body>与</body>之间-->
<div class="www_wuming_ren">
<h2>全兼容可高亮带缓冲的二级折叠菜单</h2>
<ul class="menu">
<li class="wuming_ren"><a href="https://www.wuming.ren">管理首页</a></li>
<li class="wuming_ren"><a href="#none">用户管理</a>
<ul class="_wuming_ren">
<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>
</li>
<li class="wuming_ren"><a href="#none">课程管理</a>
<ul class="_wuming_ren">
<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>
</li>
<li class="wuming_ren"><a href="#none">基础数据管理</a>
<ul class="_wuming_ren">
<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>
</li>
<li class="wuming_ren"><a href="#none">课程评论管理</a></li>
<li class="wuming_ren"><a href="#none">信息管理</a>
<ul class="_wuming_ren">
<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>
</li>
<li class="wuming_ren"><a href="#none">数据统计</a>
<ul class="_wuming_ren">
<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>
<li><a href="https://www.wuming.ren">课程按小时统计</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
/*根据类名获得对象--引用自好友司徒正美*/
function getElementsByClassName(searchClass, node,tag){
if(document.getElementsByClassName){return document.getElementsByClassName(searchClass)}
else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
returnElements = [],
current,
match;
var i = classes.length;
while(--i >= 0){patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)"));}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) returnElements.push(current);
}
return returnElements;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*
通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲突
带参数的调用方法：addLoadEvent(new Function("refurFrame('单词管理');"));
*/
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*判断是否有className的函数，调用例子为：o.className=o.addClass(o,"normal");*/
function hasClass(element, className) {
var reg = new RegExp('(\s|^)'+className+'(\s|$)');
return element.className.match(reg);
}
/*动态添加className的函数，调用例子为：addClass(document.getElementById("test"), "test");*/
function addClass(element, className) {
if (!this.hasClass(element, className)){
element.className += " "+className;/*如果有多个样式叠加，则用这种方式，如class="style1 style2"*/
/*element.className = className; */
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/*动态删除className的函数，调用例子为：removeClass(document.getElementById("test"), "test")*/
function removeClass(element, className) {
if (hasClass(element, className)){
var reg = new RegExp('(\s|^)'+className+'(\s|$)');
element.className = element.className.replace(reg,' ');
}
}
/*获取第一个子节点的函数，兼容FF*/
function getFirstChild(obj){
var firstDIV;
for (i=0; i<obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType==1){
firstDIV=obj.childNodes[i];
return firstDIV;
}
else
continue;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
addLoadEvent(new Function("hovermenu('wuming_ren','_wuming_ren','hove','cur');"));
//menu代表菜单总的ID名称
//wuming_ren代表一级菜单项的父容器，_wuming_ren代表二级菜单项的父容器
//后面的三个参数style1,style2,style3分别代表鼠标移入、移出、点击的三态样式名
addLoadEvent(new Function("submenu('_wuming_ren','hove1','hove1');"));
/*滑动显隐菜单列表*/
var temp;
var temp1;
function hovermenu(cssName1,cssName2,style2,style3){
var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数组
var ArrLevel = new Array();//第一级菜单的数组
for(var i=0;i<ArrLinks.length;i++){
var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象
ArrLevel.push(curobj);
}
var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组，要显示的二级菜单容器
for(var i=0;i<ArrLinks.length;i++){
var obj=getFirstChild(ArrLinks[i]);//获得第一个子对象
obj.index=i
obj.onmouseover= function(){overme(this,ArrLevel,style2,temp)};
obj.onmouseout=function(){outme(this,ArrLevel,style2,temp)};
obj.onclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
obj.onfocus=function(){this.blur()};//去掉虚线框
}
}
//二级菜单绑定事件
function submenu(cssName2,style2,style3){
var ArrLinks=getElementsByClassName(cssName2);//一级菜单父容器的数组
var ArrLevel = new Array();//第一级菜单的数组
for(var i=0;i<ArrLinks.length;i++){
var sublinks= ArrLinks[i].getElementsByTagName('A');//获得第一个子对象
for(var m=0;m<sublinks.length;m++){
ArrLevel.push(sublinks[m]);
}
}
for(var i=0;i<ArrLevel.length;i++){
var obj=ArrLevel[i];
obj.index=i
obj.onmouseover= function(){overme(this,ArrLevel,style2,temp1)};
obj.onmouseout=function(){outme(this,ArrLevel,style2,temp1)};
obj.onclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
obj.onfocus=function(){this.blur()};//去掉虚线框
}
}
function overme(o,links,style2,state){
if (state!=o.index){
addClass(o,style2);
}
}
function outme(o,links,style2,state){
if (state!=o.index){
removeClass(o,style2);
};
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//一级菜单点击事件
function clickme(o,links,divs,style2,style3,state){
//要判断是否有子菜单项
var objUl=links[o.index].getElementsByTagName('UL');
var subNum=objUl.length;//是否有二级菜单，0为无，大于0为有
if (state!=o.index){
for(var i=0;i<divs.length;i++){
if(subNum>0){//如果存在二级菜单项，即隐藏它
divs[i].style.display="none";
//closeObj(divs[i]);
}
}
if(subNum>0){//如果存在二级菜单项，显示当前点击的二级菜单
objUl[0].style.display="block";
showObj(objUl[0]);
}
temp=o.index;
}
for(var i=0;i<links.length;i++){
var curobj= getFirstChild(links[i]);//获得第一个子对象
removeClass(curobj,style3);
removeClass(curobj,style2);
}
addClass(o,style3);
}
//二级菜单点击事件
function subclick(o,links,style2,style3,state){
if (state!=o.index){
for(var i=0;i<links.length;i++){
removeClass(links[i],style2);
}
temp1=o.index;
addClass(o,style2);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//缓冲显示
var flag=0;
function showObj(obj){
var allhight;
allhight=obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度。
obj.style.height="1px";
var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=allhight){
obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,20);//时间开关
if(flag>0){
clearInterval(bw2);
}
}
//缓冲关闭
function closeObj(obj){
flag++;
var closeDiv=function(){
clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
//alert(flag)
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处