网页特效---很实用的多级分类导航

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效---很实用的多级分类导航</title> </head> <body> <SCRIPT language=jscript> var mmenus = new Array(); var misShow = new Boolean(); misShow=false; var misdown = new Boolean(); misdown=false; var msrcel; var mfromel; var mtoel; var mnumberofsub=0; var musestatus=false; var mthestatus=""; var mpopTimer = 0; mmenucolor='Menu';mfontcolor='MenuText';mmenuoutcolor='#B5BED6';mmenuincolor='#B5BED6';mmenuoutbordercolor='#000000';mmenuinbordercolor='#000000';mmidoutcolor='#8D8A85';mmidincolor='#8D8A85';mmenuovercolor='MenuText';mitemedge='0';msubedge='1';mmenuunitwidth=65;mmenuitemwidth=160;mmenuheight=30;mmenuwidth='100%';mmenuadjust=0;mmenuadjustV=-4;mfonts='font-family: 宋体; font-size: 9pt; color: MenuText; ';mcursor='default'; 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,level,img,sizex,sizey,pos){ this.items = new Array(); this.caption=caption; this.command=command; this.target=target; this.isline=isline; this.statustxt=statustxt; if(level!=null){mnumberofsub++; this.hasc=mnumberofsub;} this.level=level; 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; mMenuItem.prototype.addsubItem = mMenuAddItem; function mtoout(src){ src.style.border='solid 1'; 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.border='solid 1'; 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; src.style.border='solid 0'; } 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); } for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ var thesub=document.all['msubmenudiv'+nummenu] msubmenuhide(thesub); mnochange(document.all['mp'+nummenu]); document.all["mitem"+nummenu].style.color=mfontcolor; } } function mmenuhide(menuid){ menuid.style.visibility='hidden'; misShow=false; } function msubmenuhide(menuid){ menuid.style.visibility='hidden'; } function mmenushow(menuid,pid){ menuid.style.left=mposflag.offsetLeft+pid.offsetLeft+mmenuadjust;menuid.style.top=mposflag.offsetTop+mmenutable.offsetHeight+mmenuadjustV; menuid.style.visibility='visible'; if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth) menuid.style.left=document.body.clientWidth-mmenuitemwidth; misShow=true; } function mshowsubmenu(menuid,pid,rid){ menuid.style.left=pid.offsetWidth+rid.offsetLeft; menuid.style.top=pid.offsetTop+rid.offsetTop; menuid.style.visibility='visible'; if(mmenuitemwidth+parseInt(menuid.style.left)>document.body.clientWidth) menuid.style.left=document.body.clientWidth-mmenuitemwidth; } function mmenu_over(menuid,x){ mtoel = getReal(window.event.toElement, "className", "coolButton"); mfromel = getReal(window.event.fromElement, "className", "coolButton"); if (mtoel == mfromel) return; msrcel = window.event.srcElement; if(x<0){ misShow = false; mallhide(); mtoout(msrcel); }else{ mallhide(); mtoin(msrcel); mmenushow(menuid,eval("mMenu"+x)); } clearTimeout(mpopTimer); } function mmenu_out(menuid){ mtoel = getReal(window.event.toElement, "className", "coolButton"); mfromel = getReal(window.event.fromElement, "className", "coolButton"); if (mtoel == mfromel) return; msrcel = window.event.srcElement; if (misShow){ mtoin(msrcel); }else{ mnochange(msrcel); } mpopOut() } function mmenu_down(menuid,x){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); if(misShow){ mmenuhide(menuid); mtoout(msrcel); } else{ mtoin(msrcel); mmenushow(menuid,eval("mMenu"+x)); misdown=true; } } function mmenu_up(){ misdown=false; } function mmenuitem_over(menuid,item){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); for(nummenu=1;nummenu<=mnumberofsub;nummenu++){ var thesub=document.all['msubmenudiv'+nummenu] if(!(menuid==thesub||menuid.style.tag>=thesub.style.tag)){ msubmenuhide(thesub); mnochange(document.all['mp'+nummenu]); document.all["mitem"+nummenu].style.color=mfontcolor; } } if(item)document.all["mitem"+item].style.color=mmenuovercolor; if(misdown||item){ mtoin(msrcel); } else{ mtoout(msrcel); } if(mthestatus!=""){ musestatus=true; window.status=mthestatus; } clearTimeout(mpopTimer); } function mmenuitem_out(menuid,hassub){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); if(!hassub)mnochange(msrcel); if(musestatus)window.status=""; mpopOut() } function mmenuitem_down(menuid){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); mtoin(msrcel) misdown=true; } function mmenuitem_up(menuid){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); mtoout(msrcel) misdown=false; } function mexec3(j,i){ var cmd; if(eval("msub"+j).items[i].target=="blank"){ cmd = "window.open('"+eval("msub"+j).items[i].command+"')"; }else{ cmd = eval("msub"+j).items[i].target+".location='"+eval("msub"+j).items[i].command+"'"; } eval(cmd); } 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){ msrcel = getReal(window.event.srcElement, "className", "coolButton"); for(var x=0;x<=mmenus.length;x++){ if(msrcel.id=="mMenu"+x) return; } for(x=1;x<=mnumberofsub;x++){ if(msrcel.id=="mp"+x) return; } mallhide(); } } document.onclick=mbody_click; var mMenuBodyRef; function mwritetodocument(){ var mwb=1; for(var i in document.all){ if (document.all[i].tagName == 'BODY'){ mMenuBodyRef = document.all[i] var stringx='<div id="mposflag" style="position:absolute;"></div><table id=mmenutable border=0 cellpadding=0 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=""; }else{ imgsize=" width="+thismenu.sizex+" height="+thismenu.sizey; } var ifspace; if(thismenu.caption==""){ ifspace=""; }else{ ifspace=" "; } stringx += "<td class=coolButton id=mMenu"+x+" style='border: "+mitemedge+"px solid "+mmenucolor+ "' width="+mmenuunitwidth+"px onmouseover=mmenu_over(mmenudiv"+x+ ","+x+") onmouseout=mmenu_out(mmenudiv"+x+ ") onmousedown=mmenu_down(mmenudiv"+x+","+x+")"; if(thismenu.command!=""){ stringx += " onmouseup=mexec2("+x+");mmenu_up();"; }else{ stringx += " onmouseup=mmenu_up()"; } if(thismenu.pos=="0"){ stringx += " align=center><img align=absmiddle src="+thismenu.img+imgsize+">"+ifspace+thismenu.caption+"</td>"; }else if(thismenu.pos=="1"){ stringx += " align=center>"+thismenu.caption+ifspace+"<img align=absmiddle src="+thismenu.img+imgsize+"></td>"; }else if(thismenu.pos=="2"){ stringx += " align=center background="+thismenu.img+">"+thismenu.caption+"</td>"; }else{ stringx += " align=center>"+thismenu.caption+"</td>"; } stringx += ""; } stringx+="<td width=*> </td></tr></table>"; for(var x=0;x<mmenus.length;x++){ thismenu=mmenus[x]; if(x<0){ stringx+='<div id=mmenudiv'+x+' style="visiable:none"></div>'; }else{ stringx+='<div id=mmenudiv'+x+ ' style="cursor:'+mcursor+';position:absolute;'+ 'width:'+mmenuitemwidth+'px; z-index:'+(x+100); if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-left: 1px solid '+mmidoutcolor+ ';border-top: 1px solid '+mmidoutcolor;} stringx+=';border-right: 1px solid '+mmenuinbordercolor+ ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+ '<table background="../img/xpbg.gif" width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+ 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor; if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-right: 1px solid '+mmidincolor+ ';border-bottom: 1px solid '+mmidincolor;} stringx+=';border-top: 1px solid '+mmenuoutbordercolor+ ';padding: 4px" bgcolor='+mmenucolor+'>\n' for(var i=0;i<thismenu.items.length;i++){ var thismenuitem=thismenu.items[i]; var imgsize; if(thismenuitem.sizex=="0"&&thismenuitem.sizey=="0"){ imgsize="" }else{ imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey } var ifspace; if(thismenu.caption==""){ ifspace=""; }else{ ifspace=" "; } if(thismenuitem.hasc!=null){ stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% onmouseout=mmenuitem_out(mmenudiv"+x+ ",true) onmouseover=\"mthestatus='"+thismenuitem.statustxt+"';mmenuitem_over(mmenudiv"+x+ ",'"+thismenuitem.hasc+"');mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",mmenudiv"+x+");\""+ "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src="+thismenuitem.img+imgsize+">"+ifspace+thismenuitem.caption+"</td><td"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src="+thismenuitem.img+imgsize+"></td><td"; }else if(thismenuitem.pos=="2"){ stringx += "background="+thismenuitem.img+">"+thismenuitem.caption+"</td><td background="+thismenuitem.img; }else{ stringx += ">"+thismenuitem.caption+"</td><td"; } stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n"; }else if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mthestatus='"+thismenuitem.statustxt+"';mmenuitem_over(mmenudiv"+x+ ");\" onmouseout=mmenuitem_out(mmenudiv"+x+ ") onmousedown=mmenuitem_down(mmenudiv"+x+") onmouseup="; stringx += "mexec("+x+","+i+");mmenuitem_up(mmenudiv"+x+") "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src="+thismenuitem.img+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src="+thismenuitem.img+imgsize+"></td></tr>"; }else if(thismenuitem.pos=="2"){ stringx += "background="+thismenuitem.img+">"+thismenuitem.caption+"</td></tr>"; }else{ stringx += ">"+thismenuitem.caption+"</td></tr>"; } }else{ stringx+='<tr><td height="1" background="hr.gif"><img border="0" src="none.gif" width="1" height="1"></td></tr>\n'; } }stringx+='</table>\n</div>' } } for(var j=1;j<=mnumberofsub;j++){ thisitem=eval("msub"+j); stringx+='<div id=msubmenudiv'+j+ ' style="tag:'+thisitem.level+';cursor:'+mcursor+';position:absolute;'+ 'width:'+mmenuitemwidth+'px; z-index:'+(j+200); if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-left: 1px solid '+mmidoutcolor+ ';border-top: 1px solid '+mmidoutcolor;} stringx+=';border-right: 1px solid '+mmenuinbordercolor+ ';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+ '<table background="../img/xpbg.gif" width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+ 'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor; if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){ stringx+=';border-right: 1px solid '+mmidincolor+ ';border-bottom: 1px solid '+mmidincolor;} stringx+=';border-top: 1px solid '+mmenuoutbordercolor+ ';padding: 4px" bgcolor='+mmenucolor+'>\n' for(var i=0;i<thisitem.items.length;i++){ var thismenuitem=thisitem.items[i]; var imgsize; if(thismenuitem.sizex=="0"&&thismenuitem.sizey=="0"){ imgsize="" }else{ imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey } var ifspace; if(thismenu.caption==""){ ifspace=""; }else{ ifspace=" "; } if(thismenuitem.hasc!=null){ stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% onmouseout=mmenuitem_out(msubmenudiv"+j+ ",true) onmouseover=\"mthestatus='"+thismenuitem.statustxt+"';mmenuitem_over(msubmenudiv"+j+ ",'"+thismenuitem.hasc+"');mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",msubmenudiv"+j+");\""+ "><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src="+thismenuitem.img+imgsize+">"+ifspace+thismenuitem.caption+"</td><td"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src="+thismenuitem.img+imgsize+"></td><td"; }else if(thismenuitem.pos=="2"){ stringx += "background="+thismenuitem.img+">"+thismenuitem.caption+"</td><td background="+thismenuitem.img; }else{ stringx += ">"+thismenuitem.caption+"</td><td"; } stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n"; }else if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mthestatus='"+thismenuitem.statustxt+"';mmenuitem_over(msubmenudiv"+j+ ");\" onmouseout=mmenuitem_out(msubmenudiv"+j+ ") onmousedown=mmenuitem_down(msubmenudiv"+j+") onmouseup="; stringx += "mexec3("+j+","+i+");mmenuitem_up(msubmenudiv"+j+") "; if(thismenuitem.pos=="0"){ stringx += "><img align=absmiddle src="+thismenuitem.img+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>"; }else if(thismenuitem.pos=="1"){ stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src="+thismenuitem.img+imgsize+"></td></tr>"; }else if(thismenuitem.pos=="2"){ stringx += "background="+thismenuitem.img+">"+thismenuitem.caption+"</td></tr>"; }else{ stringx += ">"+thismenuitem.caption+"</td></tr>"; } }else{ stringx+='<tr><td height="1" background="hr.gif"><img border="0" src="none.gif" width="1" height="1"></td></tr>\n'; } } stringx+='</table>\n</div>' } document.write("<div align='left'>"+stringx+"</div>"); break } } } function document_load(){ mwritetodocument(); }mpmenu1=new mMenu('文件','','self','','','',''); msub1=new mMenuItem('新建','','self',false,'','1','http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0'); msub1.addsubItem(new mMenuItem('文档','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); msub1.addsubItem(new mMenuItem('网页','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','16','16','0')); msub1.addsubItem(new mMenuItem('快捷方式','','self',false,'',null,'img/index_plus.gif','16','16','0')); mpmenu1.addItem(msub1); mpmenu1.addItem(new mMenuItem('打开','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu1.addItem(new mMenuItem('保存','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu2=new mMenu('编辑','','self','','','',''); mpmenu2.addItem(new mMenuItem('撤销','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu2.addItem(new mMenuItem('重做','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu2.addItem(new mMenuItem('拷贝','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu3=new mMenu('帮助','','self','','','',''); mpmenu3.addItem(new mMenuItem('帮助','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu3.addItem(new mMenuItem('主页','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu3.addItem(new mMenuItem('邮件','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); mpmenu3.addItem(new mMenuItem('搜索','','self',false,'',null,'http://www.zlce.net/web/tj/img/index_plus.gif','0','0','0')); </SCRIPT> <SCRIPT>document_load()</SCRIPT> </body> </html>