»
EnglishFrenchVietnamese

Print - Show menu onClick - JavaScriptBank.com

Full version: jsB@nk » Menu » Show menu onClick
URL: http://www.javascriptbank.com/show-menu-onclick.html

Show menu onClick © JavaScriptBank.comThis script detects the mouse position and waits for a click on the links (Either the buttons or the images). Then it will show up a layer/div called 'Menu' near the cursorand write the appropriate list of menu on that 'Menu'.

Full version: jsB@nk » Menu » Show menu onClick
URL: http://www.javascriptbank.com/show-menu-onclick.html



JavaScript
<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 language=javascript>Content=new Array("","Menu1<hr><a href=pages/page1.html>Page1</a><br><a href=pages/page2.html>Page2</a><br><a href=pages/page3.html>Page3</a>","Menu2<hr><a href=pages/page3.html>Page3</a><br><a href=pages/page4.html>Page4</a><br><a href=pages/page5.html>Page5</a>","About Us<hr><a href=pages/page1.html>Intro</a><br><a href=pages/page2.html>About</a><br><a href=pages/page3.html>Crap!</a>","Kien's Page<hr><a href=pages/page5.html>Bios</a><br><a href=pages/page1.html>Etc</a><br><a href=pages/page4.html>Page4</a>")Yc=0Xc=0GetDiv("Menu",0,0,100,100,"pink",0,0)document.write("Menu<hr>")document.write("<a href=pages/page1.html>Page1</a><br>")document.write("<a href=pages/page2.html>Page2</a><br>")document.write("<a href=pages/page3.html>Page3</a><br>")EndDiv() function checkwhere(e) {        if(N) {evt = e;}        else {evt = event;}        X = window.evt.x;        Y = window.evt.y;if(M){if(Y<Yc-5||Y>Yc+100) BlurMenu()if(X<Xc-5||X>Xc+100) BlurMenu()}        }function GetMenu(i){Yc=YXc=Xif(M){document.all.Menu.style.top=Yc-5document.all.Menu.style.left=Xc-5document.all.Menu.style.visibility='visible'}if(N){document.layers.Menu.top=Yc-5document.layers.Menu.left=Xc-5document.layers.Menu.visibility='show'}lyrWrt("Menu",Content[i])}function BlurMenu(){if(M){document.all.Menu.style.visibility='hidden'}if(N){document.layers.Menu.visibility='hide'}}function lyrWrt(IdName,Str) { if (N){  var lyr = eval("document.layers."+IdName+".document")  lyr.write(Str)  lyr.close()} if(M) document.all[IdName].innerHTML=Str}document.onmousemove = checkwhere;if(N) {document.captureEvents(Event.MOUSEMOVE);}    </SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<FORM><TABLE cellPadding=10 width=500>  <TBODY>  <TR>    <TD><INPUT onclick=GetMenu(1) type=button value=Button1>     <TD rowSpan=4><FONT size=5>This script detects the mouse position and waits for a click on the links<BR>(Either the buttons or the images)<BR>Then it will show up a layer/div called &quot;Menu&quot; near the cursor<BR>and write the appropriate list of menu on that &quot;Menu&quot;.<BR>And as the mouse is out of the &quot;Menu&quot;,<BR>the &quot;Menu&quot; would diappear<BR>(Note: Netscape does not follow this last command) </FONT>  <TR>    <TD><A onclick=GetMenu(2)       href="http://javascriptbank.com">    <IMG       src="../image/logojs.gif" width="43" height="39"></A>   <TR>    <TD><INPUT onclick=GetMenu(3) type=button value=Button2>   <TR>    <TD><A onclick=GetMenu(4)       href="http://javascriptbank.com">    <IMG       src="../image/logojs.gif" width="43" height="38"></A> </TR></TBODY></TABLE></FORM><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->