具有動(dòng)畫效果的側(cè)邊折疊菜單

2024-09-05 12:20:48

字體：大中小

供稿：網(wǎng)友

具有動(dòng)畫效果的側(cè)邊折疊菜單，一般用于后臺(tái)管理中。通用加載函數(shù)，頁面中如果要用到onload函數(shù)在窗體一加載時(shí)就執(zhí)行的代碼，可以直接添加到這個(gè)函數(shù)，否則會(huì)引起多個(gè)onload函數(shù)的執(zhí)行沖突，menu代表菜單總的ID名稱，level1代表一級菜單項(xiàng)的父容器，level2代表二級菜單項(xiàng)的父容器，后面的三個(gè)參數(shù)style1,style2,style3分別代表鼠標(biāo)移入，移出，點(diǎn)擊的三態(tài)樣式名。

<!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;   	} }/*通用加載函數(shù)，頁面中如果要用到onload函數(shù)在窗體一加載時(shí)就執(zhí)行的代碼，可以直接添加到這個(gè)函數(shù)，否則會(huì)引起多個(gè)onload函數(shù)的執(zhí)行沖突  帶參數(shù)的調(diào)用方法：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的函數(shù)，調(diào)用例子為：o.className=o.addClass(o,"normal");*/function hasClass(element, className) {  	var reg = new RegExp('(//s|^)'+className+'(//s|$)');     	return element.className.match(reg); } /*動(dòng)態(tài)添加className的函數(shù)，調(diào)用例子為：addClass(document.getElementById("test"), "test");*/function addClass(element, className) {  	if (!this.hasClass(element, className)){   		element.className += " "+className;/*如果有多個(gè)樣式疊加，則用這種方式，如class="style1 style2"*/		/*element.className = className; */ 	} }  /*動(dòng)態(tài)刪除className的函數(shù)，調(diào)用例子為：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,' ');     	} } /*獲取第一個(gè)子節(jié)點(diǎn)的函數(shù)，兼容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代表一級菜單項(xiàng)的父容器，level2代表二級菜單項(xiàng)的父容器，//后面的三個(gè)參數(shù)style1,style2,style3分別代表鼠標(biāo)移入，移出，點(diǎn)擊的三態(tài)樣式名addLoadEvent(new Function("submenu('level2','hove1','hove1');"));/*滑動(dòng)顯隱菜單列表*/var temp;var temp1;function hovermenu(cssName1,cssName2,style2,style3){     var ArrLinks=getElementsByClassName(cssName1);//一級菜單父容器的數(shù)組	var ArrLevel = new Array();//第一級菜單的數(shù)組	for(var i=0;i0){//如果存在二級菜單項(xiàng)，即隱藏它				divs[i].style.display="none";				//closeObj(divs[i]);			}												    }			    if(subNum>0){//如果存在二級菜單項(xiàng)，顯示當(dāng)前點(diǎn)擊的二級菜單	      objUl[0].style.display="block";		  showObj(objUl[0]);		}		        temp=o.index;    }		for(var i=0;i<links.length;i++){		var curobj= getFirstChild(links[i]);//獲得第一個(gè)子對象		    				removeClass(curobj,style3);		removeClass(curobj,style2);	}									addClass(o,style3);}//二級菜單點(diǎn)擊事件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為每個(gè)菜單項(xiàng)的高度，用來計(jì)算二級菜單的總高度。   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);//時(shí)間開關(guān)   if(flag>0){	 clearInterval(bw2);   }}//緩沖關(guān)閉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>上海市政養(yǎng)護(hù)管理公司左側(cè)菜單欄</title><link href="css/menu.css" rel="stylesheet" type="text/css" /><style type="text/css"></style></head><body><div   id="iwvjtn8m0"   class="box">    <h2></h2>    <ul class="menu">      <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢	  <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>        </ul></li>      <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢        <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>        </ul>      </li>      <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢        <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>        </ul>      </li>      <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢        <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>        </ul>      </li>        <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢	  <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>              </ul></li>        <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢        <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>              </ul>      </li>       <li id="iwvjtn8m0"    class="level1">設(shè)施數(shù)據(jù)庫查詢        <ul class="level2">          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>           <li>設(shè)施數(shù)據(jù)庫查詢</li>          <li>設(shè)施數(shù)據(jù)庫查詢</li>             </ul>      </li>     </ul></div></body></html>

上一篇：Tab和滑動(dòng)門在同一頁上

下一篇：CSS 實(shí)現(xiàn)4級的下拉菜單