Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » menu bay ra/vào
URL: https://www.javascriptbank.com/flyout-menu.html
Một đoạn mã JavaScript khác để tạo hiệu ứng trình đơn truợt với sự kiện nhấp chuột.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » menu bay ra/vào
URL: https://www.javascriptbank.com/flyout-menu.html
<SCRIPT>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT>if(document.layers) document.captureEvents(Event.MOUSEMOVE);document.onmousemove=newPos;function newPos(e){mX=(navigator.appName.indexOf("Microsoft")!=-1)?event.clientX:e.pageXmY=(navigator.appName.indexOf("Microsoft")!=-1)?event.clientY:e.pageYif(mX>300||mY>200) ClearAll()}GetDiv('Menu1',10,0,100,100,'lime',1,0)document.write("<b>Menu 1</b><br>")document.write("<a href='pages/page1.html'>Page1 - intro</a><br>")document.write("<a href='pages/page2.html'>Page2 - home</a><br>")document.write("<a href='pages/page3.html'>Page3 - pool</a><br>")EndDiv()GetDiv('Menu2',50,0,100,100,'yellow',1,0)document.write("<b>Menu 2</b><br>")document.write("<a href='pages/page4.html'>Page4 - deco</a><br>")document.write("<a href='pages/page5.html'>Page5 - garden</a><br>")document.write("<a href='pages/page1.html'>Page1 - fence</a><br>")EndDiv()GetDiv('Menu3',90,0,100,100,'cyan',1,0)document.write("<b>Menu 3</b><br>")document.write("<a href='pages/page3.html'>Page3 - car</a><br>")document.write("<a href='pages/page4.html'>Page4 - boat</a><br>")document.write("<a href='pages/page5.html'>Page5 - balcony</a><br>")EndDiv()GetDiv('Cover',0,0,100,200,'white',1,1)document.write("<h1><a href='javascript:MoveMenu(1)'>Menu1</a><br>")document.write("<a href='javascript:MoveMenu(2)'>Menu2</a><br>")document.write("<a href='javascript:MoveMenu(3)'>Menu3</a></h1>")EndDiv()l=0X=0Out=nullfunction MoveMenu(m){if(Out==m){ClearAll();clic=0;return}if(m==X) returnOut=mMenU=(M)?document.all["Menu"+m].style:document.layers["Menu"+m]if(X>0) MenX=(M)?document.all["Menu"+X].style:document.layers["Menu"+X]Cont=setInterval('MoveIt()',5)}function MoveIt(){l+=4MenU.left=lif(X>0) MenX.left=101-lif(l>100) HaltIt()}function HaltIt(){clearInterval(Cont)l=0X=Out}function ClearAll(){if(l>0)clearInterval(Cont)for(i=1;i<4;i++){if(M)document.all["Menu"+i].style.left=0if(N)document.layers["Menu"+i].left=0Out=null}X=0l=0}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onresize=FixIcon()><TABLE width=550> <TBODY> <TR> <TD align=right> <H1>Flyout<BR>Menu</H1>Click on the menu items to see the submenu flyouts.<BR>Each submenu is on a separate layer/div and is moved in and out<BR>by the functions written in JavaScritp.<BR>Click View|Source Code to view the script.<BR> <HR> NB: This is only to give you the concept.<BR>Aesthetically, it needs a lot of fine tuning. :) <HR> </TR></TBODY></TABLE></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->