具有动画效果的侧边折叠菜单

2024-09-05 12:20:48

字体：大中小

来源：转载

供稿：网友

具有动画效果的侧边折叠菜单，一般用于后台管理中。通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲突，menu代表菜单总的ID名称，level1代表一级菜单项的父容器，level2代表二级菜单项的父容器，后面的三个参数style1,style2,style3分别代表鼠标移入，移出，点击的三态样式名。

<!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=gbk" /><script language="JavaScript" 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;   	} }/*通用加载函数，页面中如果要用到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;i0){//如果存在二级菜单项，即隐藏它				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);		}}//缓冲显示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,40);//时间开关   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)}</script><title>上海市政养护管理公司左侧菜单栏</title><link href="css/menu.css" rel="stylesheet" type="text/css" /><style type="text/css"></style></head><body><div class="box">    <h2></h2>    <ul class="menu">      <li class="level1">设施数据库查询	  <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>        </ul></li>      <li class="level1">设施数据库查询        <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>        </ul>      </li>      <li class="level1">设施数据库查询        <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>        </ul>      </li>      <li class="level1">设施数据库查询        <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>        </ul>      </li>        <li class="level1">设施数据库查询	  <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>              </ul></li>        <li class="level1">设施数据库查询        <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>              </ul>      </li>       <li class="level1">设施数据库查询        <ul class="level2">          <li>设施数据库查询</li>          <li>设施数据库查询</li>          <li>设施数据库查询</li>           <li>设施数据库查询</li>          <li>设施数据库查询</li>             </ul>      </li>     </ul></div></body></html>

上一篇：Tab和滑动门在同一页上

下一篇：CSS 实现4级的下拉菜单