2顶

兼容主流浏览器二级折叠菜单

稿源：互联网 2022-07-30 21:47:41 点击： 12028 撤稿纠错

漂亮js二级折叠菜单特效，带有缓冲效果，兼容主流浏览器。

以下讨论的是和折叠相关的兼容主流浏览器二级折叠菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 二级折叠菜单效果 站长特效网欢迎您。</title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{height:100%;text-align:center;}
a:link,a:visited{text-decoration:none;}
/*菜单个性设置*/
.www_zzjs_net{width:204px;height:100%;margin:0 auto;height:100%;background:url() repeat-y left top;}
.www_zzjs_net ul{list-style:none;text-align:left;}
.www_zzjs_net h2{width:204px;margin:0 auto;height:33px;background:#FFF url() no-repeat left top;text-indent:-9999px;}
/*一级菜单*/
.menu li.zzjs_net a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(/img/20100528183443.gif) no-repeat left top;}
/*一级菜单两态样式,供JS调用*/
.menu li.zzjs_net a.hove{background-position:left -31px;}
.menu li.zzjs_net a.cur{background-position:left -62px;}
/*二级菜单*/
.menu li ul{padding-left:10px;}
.menu li ul._zzjs_net{width:180px;display:none;}
.menu li ul._zzjs_net li{height:26px;line-height:26px;}
.menu li ul._zzjs_net 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._zzjs_net li a.hove1{background:#F6F6F6 url() no-repeat 30px center;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>


<div class="www_zzjs_net">
    <h2>全兼容可高亮带缓冲的二级折叠菜单</h2>
    <ul class="menu">
      <li class="zzjs_net"><a href="http://www.zzjs.net">管理首页</a></li>
      <li class="zzjs_net"><a href="#none">用户管理</a>
        <ul class="_zzjs_net">
          <li><a href="http://www.zzjs.net">用户列表</a></li>
          <li><a href="http://www.zzjs.net">用户购卡申请</a></li>
          <li><a href="http://www.zzjs.net">用户课程变更情况</a></li>
        </ul>
      </li>
      <li class="zzjs_net"><a href="#none">课程管理</a>
        <ul class="_zzjs_net">
          <li><a href="http://www.zzjs.net">课程列表</a></li>
          <li><a href="http://www.zzjs.net">添加课程</a></li>
          <li><a href="http://www.zzjs.net">添加模块或单元</a></li>
          <li><a href="http://www.zzjs.net">修改模块或单元</a></li>
        </ul>
      </li>
      <li class="zzjs_net"><a href="#none">基础数据管理</a>
        <ul class="_zzjs_net">
          <li><a href="http://www.zzjs.net">学科管理</a></li>
          <li><a href="http://www.zzjs.net">系列管理</a></li>
          <li><a href="http://www.zzjs.net">学段管理</a></li>
          <li><a href="http://www.zzjs.net">年份管理</a></li>
        </ul>
      </li>
      <li class="zzjs_net"><a href="#none">课程评论管理</a></li>
      <li class="zzjs_net"><a href="#none">信息管理</a>
        <ul class="_zzjs_net">
          <li><a href="http://www.zzjs.net">同步动态</a></li>
          <li><a href="http://www.zzjs.net">常见问题</a></li>
          <li><a href="http://www.zzjs.net">站内消息管理</a></li>
        </ul>
      </li>
      <li class="zzjs_net"><a href="#none">数据统计</a>
        <ul class="_zzjs_net">
          <li><a href="http://www.zzjs.net">总体统计</a></li>
          <li><a href="http://www.zzjs.net">课程销售统计</a></li>
          <li><a href="http://www.zzjs.net">课程学习统计</a></li>
          <li><a href="http://www.zzjs.net">课程按日期等统计</a></li>
          <li><a href="http://www.zzjs.net">课程按小时统计</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;
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/*
  通用加载函数，页面中如果要用到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();
  }
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/*判断是否有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; */
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/*动态删除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;
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
addLoadEvent(new Function("hovermenu('zzjs_net','_zzjs_net','hove','cur');"));
//menu代表菜单总的ID名称
//zzjs_net代表一级菜单项的父容器，_zzjs_net代表二级菜单项的父容器
//后面的三个参数style1,style2,style3分别代表鼠标移入、移出、点击的三态样式名
addLoadEvent(new Function("submenu('_zzjs_net','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);
 };
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//一级菜单点击事件
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);
 }
}
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
//缓冲显示
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)
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

关于兼容主流浏览器二级折叠菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090964553.shtml方便下次再访问哦。

·上一篇： 漂亮js滑动菜单
·下一篇： QQ在线客服代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

兼容主流浏览器二级折叠菜单

文章分类LIST >>返回首页

最新游戏

最新新闻