JAVASCRIPT EXAMPLES: Tips Menu

Insert Code Between Head Tags: <HEAD></HEAD>

/*
Uncle Jims Web Designs
*/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu1[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu1[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu1[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu1[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'
menu1[5]='<a href="http://jdstiles.com/">Sublink Six</a><br>'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu2[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu3[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu3[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu3[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu3[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu4[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu4[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu4[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu4[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'

//Contents for menu 5
var menu5=new Array()
menu5[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu5[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu5[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu5[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu5[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'

//Contents for menu 6
var menu6=new Array()
menu6[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu6[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu6[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu6[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu6[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'

//Contents for menu 7
var menu7=new Array()
menu7[0]='<a href="http://jdstiles.com/">Sublink One</a><br>'
menu7[1]='<a href="http://jdstiles.com/">Sublink Two</a><br>'
menu7[2]='<a href="http://jdstiles.com/">Sublink Three</a><br>'
menu7[3]='<a href="http://jdstiles.com/">Sublink Four</a><br>'
menu7[4]='<a href="http://jdstiles.com/">Sublink Five</a><br>'

</script>

Insert Code Between Body Tags: <BODY></BODY>

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">Outlook</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">Access</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu2);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu2')">Excel</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu3);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu3')">FrontPage</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu4);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu4')">PowerPoint</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu5);event.cancelBubble=true;return false"><font face=Verdana><b><a href="http://jdstiles.com/alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu5')">Windows</a></b></font>
</span>
</span>
</layer>
</ilayer><br><br><br>

<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>

<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>

<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
</script>

<div id=dropmenu3 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="4px"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu2
}
</script>

<div id=dropmenu4 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu4.style.padding="4px"
for (i=0;i<menu5.length;i++)
document.write(menu5[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu4.captureEvents(Event.CLICK)
document.dropmenu4.onclick=hidemenu2
}
</script>

<div id=dropmenu5 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu5.style.padding="4px"
for (i=0;i<menu6.length;i++)
document.write(menu6[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu5.captureEvents(Event.CLICK)
document.dropmenu5.onclick=hidemenu2
}
</script>

<div id=dropmenu6 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu6.style.padding="4px"
for (i=0;i<menu7.length;i++)
document.write(menu7[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu6.captureEvents(Event.CLICK)
document.dropmenu6.onclick=hidemenu2
}
</script>