提示：您可以先修改部分代碼再運行
<!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=gb2312" /> <title>仿windows xp左側菜單伸縮效果js特效</title> <style type="text/css"> <!-- .menu{ width:200px; height:auto; position:relative; margin:auto;} A{ COLOR: #215dc6; TEXT-DECORATION: none } span{ width:150px; height:20px; display:block;} --> </style> <script language="JavaScript"> <!-- function MFXinitMenu(){ IE = document.all ? 1:0; NN = document.layers ? 1:0; HIDDEN = (NN) ? 'hide' : 'hidden'; VISIBLE = (NN) ? 'show' : 'visible'; myLayer=new Array(); mySpeed=5; subLeft=0; closes=true; myLayer[0]=(NN) ? document.MFX0 : document.all.MFX0.style; myLayer[1]=(NN) ? document.MFX1 : document.all.MFX1.style; myLayer[2]=(NN) ? document.MFX2 : document.all.MFX2.style; myLayer[3]=(NN) ? document.MFX3 : document.all.MFX3.style; myLayer[4]=(NN) ? document.MFX4 : document.all.MFX4.style; myLayer[5]=(NN) ? document.MFX5 : document.all.MFX5.style; myLayer[6]=(NN) ? document.MFX6 : document.all.MFX6.style; myLayer[7]=(NN) ? document.MFX7 : document.all.MFX7.style; running=false; whichOpen=-1; lastMain=myLayer.length-2; MFXmain=new Array(); for(i=0; i<myLayer.length; i++){ mainORsub= i % 2; MFXmain[i] = mainORsub ? 0:1; } myTop=new Array(); myLeft=new Array(); myHeight=new Array(); myWidth=new Array(); mySlide=new Array(); for(i=0; i<myLayer.length; i++){ if(NN&&MFXmain[i]){ if(i==0){ myTop[i]=myLayer[i].top; myLeft[i]=myLayer[i].left;} else{ myLeft[i]=myLeft[i-2]; myTop[i]=myTop[i-2]+myHeight[i-2];} myHeight[i]=myLayer[i].clip.height; myWidth[i]=myLayer[i].clip.width; myLayer[i].left=myLeft[i]; myLayer[i].top=myTop[i]; myLayer[i].visibility=VISIBLE;} if(NN&&!MFXmain[i]){ myTop[i]=myTop[i-1]+myHeight[i-1]; myLeft[i]=myLeft[i-1]; myHeight[i]=myLayer[i].clip.height; myWidth[i]=myLayer[i].clip.width; mySlide[i]=myTop[i]+myHeight[i]; myLayer[i].left=myLeft[i]+subLeft; myLayer[i].top=myTop[i];} if(IE&&MFXmain[i]){ if(i==0){ myLeft[i]=myLayer[i].pixelLeft; myTop[i]=myLayer[i].pixelTop;} else{ myLeft[i]=myLeft[i-2]; myTop[i]=myTop[i-2]+myHeight[i-2];} myHeight[i]=myLayer[i].pixelHeight; myWidth[i]=myLayer[i].pixelWidth; myLayer[i].left=myLeft[i]; myLayer[i].top=myTop[i]; myLayer[i].visibility=VISIBLE;} if(IE&&!MFXmain[i]){ myTop[i]=myTop[i-1]+myHeight[i-1]; myLeft[i]=myLeft[i-1]; myHeight[i]=myLayer[i].pixelHeight; myWidth[i]=myLayer[i].pixelWidth; myLayer[i].pixelLeft=myLeft[i]+subLeft; myLayer[i].pixelTop=myTop[i]; mySlide[i]=myTop[i]+myHeight[i]; } } } function MFXrunMenu(myName,newspeed){ ieStep=0; thereS=false; thereC=false; if(newspeed>0){mySpeed=newspeed;} first=myName; if(whichOpen==-1&&!running&&MFXmain[myName]&&!(whichOpen==myName)){ running=true; if(NN){ myLayer[myName+1].clip.height=0; myLayer[myName+1].visibility=VISIBLE; } if(IE){ myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")"; myLayer[myName+1].visibility=VISIBLE; } MFXopenMenuS(myName); MFXopenMenuC(myName); } if(whichOpen>=0&&!running&&!(whichOpen==myName)){ running=true; second=whichOpen; ieStep1=myHeight[second+1]; thereCS=false; thereCC=false; MFXcloseMenuS(second); MFXcloseMenuC(second); } if(whichOpen>=0&&!running&&whichOpen==myName&&closes){ running=true; second=whichOpen; ieStep1=myHeight[second+1]; thereCS=false; thereCC=false; MFXcloseMenuS(second); MFXcloseMenuC(second); } } function MFXstopCloseS(myName){ running=false; thereCS=true; if(closes&&first==whichOpen){whichOpen=-1;} else{whichOpen=-1; MFXrunMenu(first); } } function MFXstopOpenS(myName){ running=false; thereS=true; if(IE){myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ ("auto") +" "+ ("auto") +")";} whichOpen=myName; } function MFXopenMenuS(myName){ myStep=mySpeed; if(NN&&!thereS&&!(first==lastMain)){ if(myLayer[first+2].top+myStep>mySlide[first+1]){ myStep=mySlide[first+1]-myLayer[first+2].top; } for(i=first+2; i<myLayer.length; i+=2){ myLayer[i].top+=myStep; } if(myLayer[first+2].top==mySlide[first+1]){ MFXstopOpenS(first) } if(running)setTimeout('MFXopenMenuS(first)',10); } if(IE&&!thereS&&!(first==lastMain)){ if(myLayer[first+2].pixelTop+myStep>mySlide[first+1]){ myStep=mySlide[first+1]-myLayer[first+2].pixelTop; } for(i=first+2; i<myLayer.length; i+=2){ myLayer[i].pixelTop+=myStep; } if(myLayer[first+2].pixelTop==mySlide[first+1]){ MFXstopOpenS(first) } if(running)setTimeout('MFXopenMenuS(first)',10); } } function MFXopenMenuC(myName){ myStep=mySpeed; if(NN&&!thereC){ if ((myLayer[first+1].clip.height+myStep)>myHeight[first+1]){ myLayer[first+1].clip.height=myHeight[first+1] } if(myLayer[first+1].clip.height==myHeight[first+1]){ thereC=true; whichOpen=first; MFXstopOpenS(first) }else{ myLayer[first+1].clip.height+=myStep; } if(running)setTimeout('MFXopenMenuC(first)',10); } if(IE&&!thereC){ ieStep+=myStep; myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep) +" "+ ("auto") +")"; if(ieStep>=myHeight[first+1]){ thereC=true; whichOpen=first; MFXstopOpenS(first) } if(running)setTimeout('MFXopenMenuC(first)',10); } } function MFXcloseMenuS(myName){ myStep=mySpeed; if(NN&&!thereCS&&!(second==lastMain)){ if(myLayer[second+2].top-myStep<myTop[second+2]){ myStep=myLayer[second+2].top-myTop[second+2]; } for(i=second+2; i<myLayer.length; i+=2){ myLayer[i].top-=myStep; } if(myLayer[second+2].top==myTop[second+2]){ MFXstopCloseS(second); } if(running)setTimeout('MFXcloseMenuS(second)',10); } if(IE&&!thereCS&&!(second==lastMain)){ if(myLayer[second+2].pixelTop-myStep<myTop[second+2]){ myStep=myLayer[second+2].pixelTop-myTop[second+2]; } for(i=second+2; i<myLayer.length; i+=2){ myLayer[i].pixelTop-=myStep; } if(myLayer[second+2].pixelTop==myTop[second+2]){ MFXstopCloseS(second); } if(running)setTimeout('MFXcloseMenuS(second)',10); } } function MFXcloseMenuC(myName){ myStep=-mySpeed; ieStep1-=mySpeed; if(NN&&!thereCC){ if ((myLayer[second+1].clip.bottom+myStep)<0){ myLayer[second+1].clip.bottom=0; } if(myLayer[second+1].clip.bottom==0){ thereCC=true; if(second==lastMain)MFXstopCloseS(second); }else{ myLayer[second+1].clip.bottom+=myStep; } if(running)setTimeout('MFXcloseMenuC(second)',10); } if(IE&&!thereCC){ if(ieStep1<=0){ myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (0) +" "+ ("auto") +")"; thereCC=true; if(second==lastMain)MFXstopCloseS(second); }else{ myLayer[myName+1].clip= "rect(" + ("auto") +" "+ ("auto") +" "+ (ieStep1) +" "+ ("auto") +")"; } if(running)setTimeout('MFXcloseMenuC(second)',10); } } function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } //--> </script> </head> <body onLoad="MFXinitMenu()"> <div class="menu"> <DIV id="MFX0" ><b>+網路設定中心</b></dIV> <div id="MFX1" > <span>-站長手冊</span> <span>-動態網域名稱</span> <span>-DHCP服務</span> <span>-ADSL設定</span> <span>-MODEM設定</span> </div> <div id="MFX2" ><b>+安全配置中心</b></div> <DIV id="MFX3" > <span>-入侵偵測系統</span> <span>-行為管理系統</span> <span>-虛擬網系統</span> <span>-防火牆系統</span> </dIV> <DIV id="MFX4" ><b>+系統報告中心</b></dIV> <DIV id="MFX5" > <span>-系統狀態</span> <span>-網路流量圖</span> <span>-TCP串連</span> <span>-系統日誌</span> </dIV> <DIV id="MFX6" ><b>+進階配置中心</b></dIV> <DIV id="MFX7" > <span>-安全遠端存取</span> <span>-密碼設定</span> <span>-系統更新</span> <span>-系統備份</span> <span>-系統復原</span> <span>-主機控制</span> </div></div> </body> </html></td> </tr></table>
提示：您可以先修改部分代碼再運行
