Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.111cn.net/1999/xhtml"><pead><title>Compatible with highlighted and buffered secondary folding menus</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<pead>与</pead>之间--><style type="text/css">/* Fully compatible, highlighted and buffered secondary folding menu * // * author: biny of the ice extreme peak * // * blog: Ice extreme peak blog: running auto; height: 100%; background: url (yun_qi_img/20100528183319.gif) repeat-y left top ;}. box ul {list-style: none; text-align: left ;}. box h2 {width: 204px; margin: 0 auto; height: 33px; background: # FFF url (yun_qi_img/20100528183405.gif) no-repeat left top; text-indent:-9999px ;} /* Level-1 menu */. menu li. level1 a {display: block; line-height: 31px; height: 31px; padding-left: 50px; font-size: 12px; color: # fff; background: url (yun_qi_img/20100528183443.gif) no-repeat left top;}/* Two-State menu style for JS call */. menu li. level1. hove {background-position: left-31px ;}. menu li. level1. cur {background-position: left-62px;}/* Level-2 menu */. menu li ul {padding-left: 10px ;}. menu li ul. level2 {width: 180px; display: none ;}. menu li ul. level2 li {height: 26px; line-height: 26px ;}. menu li ul. level2 li a {display: block; height: 26px; line-height: 26px; background: # E7E3E7 url (yun_qi_img/20100528183525.gif) no-repeat 30px center; padding-left: 50px; color: # running 56B; border-top: 1px # B8C2CB solid; overflow: hidden;}/* Two-State menu style for JS calls */. menu li ul. level2 li. hove1 {background: # F6F6F6 url (yun_qi_img/20100528183525.gif) no-repeat 30px center ;}</style></pead><body><!--把下面代码加到<body>与</body>之间--><div class="box"> <p>Fully compatible, highlighted and buffered secondary folding menu</p> <ul class="menu"> <li class="level1">Manage homepage</li> <li class="level1">User Management<ul class="level2"> <li>User list</li> <li>User card purchase application</li> <li>User Course changes</li> </ul> </li> <li class="level1">Course management<ul class="level2"> <li>Course List</li> <li>Add course</li> <li>Add modules or units</li> <li>Modify a module or unit</li> </ul> </li> <li class="level1">Basic data management<ul class="level2"> <li>Subject management</li> <li>Series Management</li> <li>Segment management</li> <li>Year management</li> </ul> </li> <li class="level1">Course comment management</li> <li class="level1">Information management<ul class="level2"> <li>Synchronous Dynamic</li> <li>FAQs</li> <li>Intra-site message management</li> </ul> </li> <li class="level1">Data Statistics<ul class="level2"> <li>Overall statistics</li> <li>Course sales statistics</li> <li>Course learning statistics</li> <li>Course statistics by date</li> <li>Course hourly statistics</li> </ul> </li> </ul></div><script type="text/javascript">/* Get the object based on the class name-reference from friend situ Zhengmei */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; } }/* 通用加载函数，页面中如果要用到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();}}}/*判断是否有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; */ } } /*动态删除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;}}addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));//menu代表菜单总的ID名称//level1代表一级菜单项的父容器，level2代表二级菜单项的父容器//后面的三个参数style1,style2,style3分别代表鼠标移入、移出、点击的三态样式名addLoadEvent(new Function("submenu('level2','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); };}//一级菜单点击事件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) {// if there is a level-2 menu item, that is, hide it divs [I]. style. display = "none"; // closeObj (divs [I]) ;}} if (subNum> 0) {// if a list menu item exists, displays the currently clicked level-2 menu 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);}}//缓冲显示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) ;}// buffer off 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 )}</script></body></ptml>
Tip: you can modify some code before running
