Drop-Down Menu Box On Click

This script will create a drop down menu box when you click on the link. It can be used as a navigation tool for your web site where you can put links to other web pages.

Insert this code between the <HEAD> and </HEAD> tags:

Insert this code where you want the menu to appear:

<ILAYER id="menu01" height=35px> <LAYER id="menu02" visibility=show> <SPAN id="wrapper"> <SPAN id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false"> <FONT face="Verdana"><B><A href="notthisbrowser.html">YOUR MENU NAME HERE</A></B></FONT> </SPAN> </SPAN> </LAYER> </ILAYER> <SCRIPT language="JavaScript1.2"> var enableeffect=true // EDIT YOUR LINKS HERE, YOU CAN ADD AS MANY AS YOU LIKE var selection=new Array() selection[0]='<font face="ARIAL BLACK"><a href="http://www.mysite.com">Go To Home Page</a><br>' selection[1]='<a href="http://www.mysite.com/privacy.htm">Privacy Polcy</a><br>' selection[2]='<a href="http://www.mysite.com/contact.html">Contact Us</a><br></font>' if (document.layers) document.menu01.document.menu02.visibility='show' function dropit2(){ if (document.all){ menu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX menu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (menu03.style.visibility=="hidden"){ if (enableeffect) menu03.filters.revealTrans.apply() menu03.style.visibility="visible" if (enableeffect) menu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.menu03.visibility=="hide") document.menu03.visibility="show" else document.menu03.visibility="hide" document.menu03.left=e.pageX-e.layerX document.menu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) menu03.filters.revealTrans.stop() menu03.style.visibility="hidden" } function hidemenu2(){ document.menu03.visibility="hide" } if (document.layers){ document.menu01.document.menu02.captureEvents(Event.CLICK) document.menu01.document.menu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </SCRIPT> <DIV id="menu03" style="position:absolute;left:0;top:0;layer-background-color:#000000;background-color:#000000;width:200;visibility:hidden;border:2px solid blue;padding:0px"> <SCRIPT language="JavaScript1.2"> if (document.all) menu03.style.padding='4px' for (i=0;i<selection.length;i++) document.write(selection[i]) </SCRIPT> </DIV> <SCRIPT language="JavaScript1.2"> if (document.layers){ document.menu03.captureEvents(Event.CLICK) document.menu03.onclick=hidemenu2 } </SCRIPT>