酷似Windows的多級下拉菜單（仿FLASH）

2024-09-05 12:19:35

字體：大中小

來源：轉載

供稿：網友

酷似Windows的仿FLASH多級下拉菜單，動畫展開菜單項，還有淡入淡出效果，很不錯吧！不過缺點是完全依靠JS，不能由程序動態控制輸出，不過也不一定，看你水平有多高啦！哈~

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>酷似Windows的下拉菜單</title></head><body><SCRIPT language="JavaScript">var mmenus    = new Array();var misShow   = new Boolean(); misShow=false;var misdown   = new Boolean();misdown=false;var musestatus=false;var mpopTimer = 0;mmenucolor='#FFE1F5';mfontcolor='MenuText';mmenuoutcolor='#FFE1F5';mmenuincolor='#FFE1F5';mmenuoutbordercolor='#FFFFFF';mmenuinbordercolor='#000000';mmidoutcolor='#E2DFDA';mmidincolor='#8D8A85';mmenuovercolor='MenuText';mitemedge='1';msubedge='1';mmenuunitwidth=50;mmenuitemwidth=100;mmenuheight=22;mmenuwidth='320';mmenuadjust=0;mmenuadjustV=0;mfonts='font-family: 宋體; font-size: 9pt; color: MenuText; ';mcursor='default';var fadeSteps = 15;var fademsec = 100;//顯示速度var fadeArray = new Array();function fade(el, fadeIn, steps, msec) {	if (steps == null) steps = fadeSteps;	if (msec == null) msec = fademsec;	if (el.fadeIndex == null)		el.fadeIndex = fadeArray.length;	fadeArray[el.fadeIndex] = el;	if (el.fadeStepNumber == null) {		if (el.style.visibility == "hidden")			el.fadeStepNumber = 0;		else			el.fadeStepNumber = steps;		if (fadeIn)			el.style.filter = "Alpha(Opacity=0)";		else			el.style.filter = "Alpha(Opacity=100)";	}	window.setTimeout("repeatFade(" + fadeIn + "," + el.fadeIndex + "," + steps + "," + msec + ")", msec);}function repeatFade(fadeIn, index, steps, msec) {		el = fadeArray[index];		c = el.fadeStepNumber;	if (el.fadeTimer != null)		window.clearTimeout(el.fadeTimer);	if ((c == 0)  &&  (!fadeIn)) {		el.style.visibility = "hidden";		return;	}	else if ((c==steps)  &&  (fadeIn)) {		el.style.filter = "";		el.style.visibility = "visible";		return;	}	else {	(fadeIn) ? 	c++ : c--;	el.style.visibility = "visible";	el.style.filter = "Alpha(Opacity=" + 100*c/steps + ")";	el.fadeStepNumber = c;	el.fadeTimer = window.setTimeout("repeatFade(" + fadeIn + "," + index + "," + steps + "," + msec + ")", msec);	}}function stoperror(){return true;}window.onerror=stoperror;function mpopOut() {mpopTimer = setTimeout('mallhide()', 500);}function getReal(el, type, value) {	temp = el;	while ((temp != null)  &&  (temp.tagName != "BODY")) {		if (eval("temp." + type) == value) {			el = temp;			return el;		}		temp = temp.parentElement;	}	return el;}function mMenuRegister(menu) {  mmenus[mmenus.length] = menu  return (mmenus.length - 1)}function mMenuItem(caption,command,target,isline,statustxt,img,sizex,sizey,pos){	this.caption=caption;	this.command=command;	this.target=target;	this.isline=isline;	this.statustxt=statustxt;	this.img=img;	this.sizex=sizex;	this.sizey=sizey;	this.pos=pos;}function mMenu(caption,command,target,img,sizex,sizey,pos){	this.items = new Array();	this.caption=caption;	this.command=command;	this.target=target;	this.img=img;	this.sizex=sizex;	this.sizey=sizey;	this.pos=pos;	this.id=mMenuRegister(this);}function mMenuAddItem(item){  this.items[this.items.length] = item  item.parent = this.id;  this.children=true;}mMenu.prototype.addItem = mMenuAddItem;function mtoout(src){src.style.borderLeftColor=mmenuoutbordercolor;src.style.borderRightColor=mmenuinbordercolor;src.style.borderTopColor=mmenuoutbordercolor;src.style.borderBottomColor=mmenuinbordercolor;src.style.backgroundColor=mmenuoutcolor;src.style.color=mmenuovercolor;}function mtoin(src){src.style.borderLeftColor=mmenuinbordercolor;src.style.borderRightColor=mmenuoutbordercolor;src.style.borderTopColor=mmenuinbordercolor;src.style.borderBottomColor=mmenuoutbordercolor;src.style.backgroundColor=mmenuincolor;src.style.color=mmenuovercolor;}function mnochange(src){src.style.borderLeftColor=mmenucolor;src.style.borderRightColor=mmenucolor;src.style.borderTopColor=mmenucolor;src.style.borderBottomColor=mmenucolor;src.style.backgroundColor='';src.style.color=mfontcolor;}function mallhide(){	for(var nummenu=0;nummenu<mmenus.length;nummenu++){		var themenu=document.all['mMenu'+nummenu]		var themenudiv=document.all['mmenudiv'+nummenu]                mnochange(themenu);                mmenuhide(themenudiv);                }}function mmenuhide(menuid){fade(menuid,false,5);misShow=false;}function mmenushow(menuid,pid){menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV;if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth+document.body.scrollLeft)menuid.style.left=document.body.clientWidth+document.body.scrollLeft-mmenuitemwidth;fade(menuid,true,5);misShow=true;}function mmenu_over(menuid,x){toel = getReal(window.event.toElement, "className", "coolButton");fromel = getReal(window.event.fromElement, "className", "coolButton");if (toel == fromel) return;if(x==0||x==4){  misShow = false;  mallhide();  mtoout(eval("mMenu"+x));}else{  mallhide();  mtoin(eval("mMenu"+x));  mmenushow(menuid,eval("mMenu"+x));}clearTimeout(mpopTimer);}function mmenu_out(x){toel = getReal(window.event.toElement, "className", "coolButton");fromel = getReal(window.event.fromElement, "className", "coolButton");if (toel == fromel) return;if (misShow){mtoin(eval("mMenu"+x));}else{mnochange(eval("mMenu"+x));}mpopOut()}function mmenu_down(menuid,x){  if(misShow){  mmenuhide(menuid);  mtoout(eval("mMenu"+x));  }  else{  mtoin(eval("mMenu"+x));  mmenushow(menuid,eval("mMenu"+x));  misdown=true;  }}function mmenu_up(){  misdown=false;}function mmenuitem_over(x,i){srcel = getReal(window.event.srcElement, "className", "coolButton");if(misdown){	mtoin(srcel);}else{mtoout(srcel);}mthestatus = mmenus[x].items[i].statustxt;if(mthestatus!=""){	musestatus=true;	window.status=mthestatus;}clearTimeout(mpopTimer);}function mmenuitem_out(){srcel = getReal(window.event.srcElement, "className", "coolButton");mnochange(srcel);if(musestatus)window.status="";mpopOut()}function mmenuitem_down(){srcel = getReal(window.event.srcElement, "className", "coolButton");mtoin(srcel)misdown=true;}function mmenuitem_up(){srcel = getReal(window.event.srcElement, "className", "coolButton");mtoout(srcel)misdown=false;}function mexec2(x){var cmd;if(mmenus[x].target=="blank"){  cmd = "window.open('"+mmenus[x].command+"')";}else{  cmd = mmenus[x].target+".location=/""+mmenus[x].command+"/"";}eval(cmd);}function mexec(x,i){var cmd;if(mmenus[x].items[i].target=="blank"){  cmd = "window.open('"+mmenus[x].items[i].command+"')";}else{  cmd = mmenus[x].items[i].target+".location=/""+mmenus[x].items[i].command+"/"";}eval(cmd);}function mbody_click(){if (misShow){	srcel = getReal(window.event.srcElement, "className", "coolButton");	for(var x=0;x<=mmenus.length;x++){		if(srcel.id=="mMenu"+x)		return;	}	mallhide();}}document.onclick=mbody_click;function mwritetodocument(){      var mwb=1;                     var stringx='<div   class="hjxnpzl"   id="mposflag" style="position:absolute;"></div><table  id=mmenutable border=0 cellpadding=3 cellspacing=2 width='+mmenuwidth+' height='+mmenuheight+' bgcolor='+mmenucolor+                     ' onselectstart="event.returnValue=false"'+                     ' style="cursor:'+mcursor+';'+mfonts+                     ' border-left: '+mwb+'px solid '+mmenuoutbordercolor+';'+                     ' border-right: '+mwb+'px solid '+mmenuinbordercolor+'; '+                     'border-top: '+mwb+'px solid '+mmenuoutbordercolor+'; '+                     'border-bottom: '+mwb+'px solid '+mmenuinbordercolor+'; padding:0px"><tr>'                     for(var x=0;x<mmenus.length;x++){                     	var thismenu=mmenus[x];                     	var imgsize="";                     	if(thismenu.sizex!="0"||thismenu.sizey!="0")imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey;                     	var ifspace="";                     	if(thismenu.caption!="")ifspace=" ";                     	stringx += "<td nowrap class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+                     	"' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenudiv"+x+                     	","+x+") onmouseout=mmenu_out("+x+                     	") onmousedown=mmenu_down(mmenudiv"+x+","+x+")";                     	      if(thismenu.command!=""){                     	          stringx += " onmouseup=mmenu_up();mexec2("+x+");";                     	      }else{                     	      	  stringx += " onmouseup=mmenu_up()";                     	      }                     	      if(thismenu.pos=="0"){                     	          stringx += " align=center><img align=absmiddle src='http://www.aspku.com"+thismenu.img+"'"+imgsize+">"+ifspace+thismenu.caption+"</td>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20}else%20if(thismenu.pos=="1"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20stringx%20+=%20"%20align=center>"+thismenu.caption+ifspace+"<img%20align=absmiddle%20src='"+thismenu.img+"'"+imgsize+"></td>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20}else%20if(thismenu.pos=="2"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20stringx%20+=%20"%20align=center%20background='"+thismenu.img+"'>%20"+thismenu.caption+"%20</td>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20stringx%20+=%20"%20align=center>%20"+thismenu.caption+"%20</td>";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	stringx%20+=%20"";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stringx+="<td%20width=*>%20</td></tr></table>";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20x=0;x<mmenus.length;x++){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	thismenu=mmenus[x];%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(x==0||x==4){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stringx+='<div%20id=mmenudiv'+x+'%20style="visiable:none"></div>';%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stringx+='<div%20id=mmenudiv'+x+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%20style="cursor:'+mcursor+';position:absolute;'+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'width:'+mmenuitemwidth+'px;%20z-index:'+(x+100);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(mmenuinbordercolor!=mmenuoutbordercolor%20&&%20msubedge=="0"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stringx+=';border-left:%201px%20solid%20'+mmidoutcolor+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20';border-top:%201px%20solid%20'+mmidoutcolor;}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stringx+=';border-right:%201px%20solid%20'+mmenuinbordercolor+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20';border-bottom:%201px%20solid%20'+mmenuinbordercolor+';visibility:hidden"%20onselectstart="event.returnValue=false">/n'+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	'<table%20%20width="100%"%20border="0"%20height="100%"%20align="center"%20cellpadding="0"%20cellspacing="2"%20'+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	'style="'+mfonts+'%20border-left:%201px%20solid%20'+mmenuoutbordercolor;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(mmenuinbordercolor!=mmenuoutbordercolor%20&&%20msubedge=="0"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	stringx+=';border-right:%201px%20solid%20'+mmidincolor+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	';border-bottom:%201px%20solid%20'+mmidincolor;}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	stringx+=';border-top:%201px%20solid%20'+mmenuoutbordercolor+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	';padding:%204px"%20bgcolor='+mmenucolor+'>/n'%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	for(var%20i=0;i<thismenu.items.length;i++){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		var%20thismenuitem=thismenu.items[i];%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		var%20imgsize="";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize="%20width="+thismenuitem.sizex+"%20height="+thismenuitem.sizey;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20var%20ifspace="";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20if(thismenu.caption!="")ifspace="%20";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		if(!thismenuitem.isline){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		stringx%20+=%20"<tr><td%20class=coolButton%20style='border:%20"+mitemedge+"px%20solid%20"+mmenucolor+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		"'%20width=100%%20height=15px%20onmouseover=/"mmenuitem_over("+x+","+i+%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		");/"%20onmouseout=mmenuitem_out()%20onmousedown=mmenuitem_down()%20onmouseup=";%20				stringx%20+=%20"mmenuitem_up();mexec("+x+","+i+");%20";%20				if(thismenuitem.pos=="0"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20%20%20stringx%20+=%20"><img%20align=absmiddle%20src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20}else%20if(thismenuitem.pos=="1"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20%20%20stringx%20+=%20">"+thismenuitem.caption+ifspace+"<img%20align=absmiddle%20src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20}else%20if(thismenuitem.pos=="2"){%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20%20%20stringx%20+=%20"background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";	%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20}else{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20%20%20stringx%20+=%20">"+thismenuitem.caption+"</td></tr>";%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20	%20%20%20%20%20%20%20%20%20%20}%20				}else{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20		stringx+='<tr><td%20height="1"%20background="hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="http://www.aspku.com/texiao/caidan/none.gif" border="0"></td></tr>/n';                     		}                     	}stringx+='</table>/n</div>'                     	}                 }          document.write("<div align='left'>"+stringx+"</div>");}mpmenu1=new mMenu('愛好者','#','self','','','','');mpmenu2=new mMenu('網頁制作','/','self','','','','');mpmenu2.addItem(new mMenuItem('人物圖庫','/','self',false,'','','','',''));mpmenu2.addItem(new mMenuItem('風景圖庫','/','self',false,'','','','',''));mpmenu2.addItem(new mMenuItem('花草圖庫','/','self',false,'','','','',''));mpmenu2.addItem(new mMenuItem('其它圖庫','/','self',false,'','','','',''));mpmenu3=new mMenu('網頁素材','/','self','','','','');mpmenu3.addItem(new mMenuItem('線條圖庫','/','self',false,'','','','',''));mpmenu3.addItem(new mMenuItem('按鈕圖庫','/','self',false,'','','','',''));mpmenu3.addItem(new mMenuItem('其它圖庫','/','self',false,'','','','',''));mpmenu4=new mMenu('源碼資源','/','self','','','','');mpmenu4.addItem(new mMenuItem('最新源碼','/other/lastupdate.shtml','self',false,'','','','',''));mpmenu4.addItem(new mMenuItem('ASP源碼','/','self',false,'','','','',''));mpmenu4.addItem(new mMenuItem('PHP源碼','/sort/list_2_1.shtml','self',false,'','','','',''));mpmenu4.addItem(new mMenuItem('JSP源碼','/sort/list_4_1.shtml','self',false,'','','','',''));mpmenu4=new mMenu('網頁特效','/jscss/','self','','','','');mwritetodocument();</SCRIPT></body></html>

上一篇：省市縣三級菜單

下一篇：點擊文字后菜單慢慢展開