[『网页特效代码*导航菜单类*』]非常不错的类似Windows的导航菜单摩羯天使 发布于 2007-01-06 15:50 Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的类似Windows的导航菜单</title> </head> <body> <SCRIPT language="jscript.encode"> 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 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='"+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||x==4){ 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 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=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over("+x+","+i+ ");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec("+x+","+i+"); "; 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" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="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('设计基础','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('ASP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('PHP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('设计提高','#','self',false,'','','','','')); mpmenu4=new mMenu('网页特效','#','self','','','',''); mwritetodocument(); </SCRIPT> </body> </html> 效果 请打开『网页编辑器-1』将代码放入“代码”处再点击“浏览网页”看效果
[『网页特效代码*导航菜单类*』]非常不错的类似Windows的导航菜单摩羯天使 发布于 2007-01-06 15:50
Tags: 时尚 图片 代码 素材 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的类似Windows的导航菜单</title> </head> <body> <SCRIPT language="jscript.encode"> 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 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='"+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||x==4){ 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 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=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over("+x+","+i+ ");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec("+x+","+i+"); "; 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" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="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('设计基础','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('ASP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('PHP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('设计提高','#','self',false,'','','','','')); mpmenu4=new mMenu('网页特效','#','self','','','',''); mwritetodocument(); </SCRIPT> </body> </html> 效果 请打开『网页编辑器-1』将代码放入“代码”处再点击“浏览网页”看效果
代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>非常不错的类似Windows的导航菜单</title> </head> <body> <SCRIPT language="jscript.encode"> 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 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='"+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||x==4){ 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 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=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey; var ifspace=""; if(thismenu.caption!="")ifspace=" "; if(!thismenuitem.isline){ stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+ "' width=100% height=15px onmouseover=\"mmenuitem_over("+x+","+i+ ");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup="; stringx += "mmenuitem_up();mexec("+x+","+i+"); "; 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" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="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('设计基础','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('ASP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('PHP文章','#','self',false,'','','','','')); mpmenu4.addItem(new mMenuItem('设计提高','#','self',false,'','','','','')); mpmenu4=new mMenu('网页特效','#','self','','','',''); mwritetodocument(); </SCRIPT> </body> </html>
效果
请打开『网页编辑器-1』将代码放入“代码”处再点击“浏览网页”看效果
首页 『图片素材*综合类*』(32) 『图片素材*节日类*』(48) 『图片素材*花草类*』(3) 『图片素材*风景类*』(4) 『图片素材*人物类*』(31) 『图片素材*动物类*』(1) 『图片素材*Gif动画*』(10) 『图片素材*信纸类*』(15) 『图片素材*横幅类*』(2) 『图片素材*年历、月历、日历*』(2) 『图片特效』(5) 『网页背景*综合类*』(10) 『网页背景*节日类*』(3) 『网页背景*溶图*』(6) 『网页背景*花草类*』(1) 『网页背景*闪底*』(0) 『网页背景*动态类*』(1) 『网页色彩』(2) 『网页特效代码*综合类*』(13) 『网页特效代码*鼠标特效类*』(0) 『网页特效代码*导航菜单类*』(9) 『网页特效代码*图片特效类*』(1) 『特效文字』(7) 『网页播放器』(2) 『图标』(10) 『壁纸』(1) 『花边*蕾丝花边*花纹』(2) 『边框*表格』(34) 『分隔线』(31) 『分隔线*节日类*』(3) 『Flash素材』(28) 『Flash素材*节日类*』(5) 『套装素材』(16) 『Photoshop学习』(1) 『网页制作技巧』(5) 『经典素材站』(4) 『网站欣赏』(3) 『原创音画』(3) 『临时储藏室』(3) 『私密空间』(6) 『其它』(5)
素材阁所有素材资源除署名外均由摩羯天使从网络搜集并整理制作与朋友们分享，如有不慎侵犯作者或公司版权的地方敬请发邮件告之，本人将尽快删除。 （E-mail:yaonana67@126.com）
精美溶图素材(五) 精美溶图素材(四) 精美溶图素材(三) 精美溶图素材(二) 精美溶图素材(一)
『音乐发烧友』 『摩羯天使』 『DAYDREAM』 『卡卡音乐书房』 『席家花园』 『Yupoo相册』 『网页编辑器-1』 『网页编辑器-2』 『网页编辑器-3』 『网页编辑器-4』 『网页编辑器-5』 『日志背景图产生器』 『在线日历』 『在线制作照片贺卡』 『在线处理照片』 『图片滤镜产生器』 『在线图片工具』 『页面效果生成器』 『在线制作相册MV视频』 『最酷的在线相册』 『配色方案-1』 『配色方案-2』 『配色方案-3』 『配色方案-4』 『配色方案-5』 『在线配色』 『中国传统色彩名录』 『滚动条颜色生成器』 『Logo在线制作』 『Logo，Button在线制作』 『3D banner在线制作』 『Flash上传空间』 『IE在线PhotoShop』 『在线生成行走动画』 『论坛动画头像在线制作』 『印章在线制作』 『Html-Js代码互转便利工具』 『PS透明蕾丝素材』 『各种字体生成器』 『在线汉字简体繁体转换』 『英文闪字生成器-1』 『英文闪字生成器-2』 『字体工具』 『闪字生成器』 『洪恩在线有声词典』 『世界地图』 『真题网』 『原版英语』 『在线词典』 『我爱英语网』 『MP3：闭着眼睛背四级单词』 『爱词霸』 『esnips』 『音乐搜索-搜狗』 『音乐搜索-奇虎』 『音乐搜索-SOSO音乐』 『看道音乐网』 『圣经』 『纳米盘』
用户名
密 码
日志总数:370 今日访问:4874 访问总数:1929670 评论总数:272 留言总数:70
[『网页特效代码*导航菜单类*』]非常不错的类似Windows的导航菜单
日志列表 
屏幕分辨率设置1024x768像素
