HOME PAGE
JAVASCRIPTS
OFFICE TIPS
Uncle Jim's Web Designs
Layered Menu
Author:
Jim Stiles
Create Endless Menus and Submenus
Customizable hovercolor, background color, background image
Customizable menu border and border color in IE 5
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
<style type="text/css"><!-- BODY, DIV, TD, LAYER { font-size:10pt; font-family:arial; } A:link, A:visited { color:#FF00FF; text-decoration:none; } A:hover, A:active { color:#FF00FF; text-decoration:bold; } //--></style> <script type="text/javascript"><!-- /* ______________________________________________________ /ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ\ | Another JavaScript from Uncle Jim | | Feel free to copy, use and change this script as | | long as this part remains unchanged. | | Visit my website at http://www.jdstiles.com | | for more scripts like this one | | Created: 1996 | | Last Updated: December, 2005 | \______________________________________________________/ ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ */ No3 = (parseInt(navigator.appVersion) > 3) ? 1:0; layer = (document.all && No3) ? "document.all['L'+menu].style" : (document.layers && No3) ? "document.layers['L'+menu]" : 0; var timer; function Show() { if(layer) { if(timer) clearTimeout(timer); for(menu=0; menu<Layer.length; menu++) { if(Layer[menu]) { eval(layer).visibility = "hidden"; } } for(i=0; i<arguments.length; i++) { menu=arguments[i]; eval(layer).visibility = "visible"; } } } function Hide() { timer = setTimeout("Show()", 500); } //--></script>
COPY
-
Insert Inside Body: <BODY></BODY>
<SPAN ID="menubar" STYLE="position:relative; visibility:hidden;"> <TABLE WIDTH=300 BGCOLOR="#000000" BORDER=0 CELLPADDING=2 CELLSPACING=0><TR> <TD><A HREF="http://www.jdstiles.com" onMouseOver="Show(1)" onMouseOut="Hide(1)">HOME PAGE</A></TD> <TD><A HREF="http://jdstiles.com/javamain.html" onMouseOver="Show(2)" onMouseOut="Hide(2)">JAVASCRIPTS</A></TD> <TD><A HREF="http://jdstiles.com/jds.main_office.html" onMouseOver="Show(3)" onMouseOut="Hide(3)">OFFICE TIPS</A></TD> </TR></TABLE> </SPAN> <script type="text/javascript"><!-- /* ______________________________________________________ /ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ\ | Another JavaScript from Uncle Jim | | Feel free to copy, use and change this script as | | long as this part remains unchanged. | | Visit my website at http://www.jdstiles.com | | for more scripts like this one | | Created: 1996 | | Last Updated: December, 2005 | \______________________________________________________/ ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ */ ////////////////////////////////////////////////////// hovercolor = "#00FF00"; // color name/code bgcolor = "#000000"; // color name/code background = ""; // picture url menu_border = 1; // IE only border_color = "#000000"; // IE only arrow_pic = ""; // url of arrow picture for submenus ////////////////////////////////////////////////////// if(document.all) { if(!background) { background=bgcolor; } else { background = "url("+background+")"; } } function LayerSpecs(Left,Top,Width) { if(No3) { if(document.all) { Top+=7; Left+=2; Width-=6; } this.left = Left; this.top = Top; this.info = ""; T=0; for(i=3; i<arguments.length; i++) { if(document.all) { this.info += "<TR><TD WIDTH="+Width+" onMouseOver='this.bgColor=\""+hovercolor+"\"' onMouseOut='this.bgColor=\"\"'>"+arguments[i]+"</TD></TR>"; } else { this.info += "<LAYER onMouseOver='this.bgColor=\""+hovercolor+"\"' onMouseOut='this.bgColor=\""+bgcolor+"\"' WIDTH="+Width+" POSITION=RELATIVE TOP="+T+"> "+arguments[i]+"</LAYER>"; } T+=20; } } } Layer = new Array(); arrow = "<IMG SRC='"+arrow_pic+"' WIDTH=6 HEIGHT=10 BORDER=0 ALT=''>"; ////////////////////////////////////////////// /* Create Your layers below by typing: Layer[incrementing number] = new LayerSpecs(Left Position, Top Position, Width, List of Links Seperated by Commas) If a layer has a sublayer, add onMouseOver="Show(Layer Number to Open, Current Layer, Any Layers Opened before the current layer (seperated by commas) */ Layer[1] = new LayerSpecs(8,47,110, '<A HREF="http://jdstiles.com/index1.html" onMouseOver="Show(4,1)">Main Page</A> '+arrow, '<A HREF="http://www.javascripts.com" onMouseOver="Show(1)">Index2</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(1)">Index3</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(1)">Site Index</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(1)">Search Page</A> ' ); Layer[2] = new LayerSpecs(74,47,110, '<A HREF="http://www.javascripts.com" onMouseOver="Show(6,2)">Layer 2</A> '+arrow, '<A HREF="http://www.javascripts.com" onMouseOver="Show(2)">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(7,2)">Javascripts.com</A> '+arrow, '<A HREF="http://www.javascripts.com" onMouseOver="Show(8,2)">Javascripts.com</A> '+arrow, '<A HREF="http://www.javascripts.com" onMouseOver="Show(2)">Javascripts.com</A> ' ); Layer[3] = new LayerSpecs(141,47,110, '<A HREF="http://www.javascripts.com">Layer 3</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ' ); Layer[4] = new LayerSpecs(119,47,110, '<A HREF="http://www.javascripts.com" onMouseOver="Show(4,1)">Layer 4</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(4,1)">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(4,1)">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com" onMouseOver="Show(5,4,1)">Javascripts.com</A> '+arrow, '<A HREF="http://www.javascripts.com" onMouseOver="Show(4,1)">Javascripts.com</A> ' ); Layer[5] = new LayerSpecs(230,47,110, '<A HREF="http://www.javascripts.com">Layer 5</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ' ); Layer[6] = new LayerSpecs(185,47,110, '<A HREF="http://www.javascripts.com">Layer 6</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ' ); Layer[7] = new LayerSpecs(185,47,110, '<A HREF="http://www.javascripts.com">Layer 7</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ' ); Layer[8] = new LayerSpecs(185,47,110, '<A HREF="http://www.javascripts.com">Layer 8</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ', '<A HREF="http://www.javascripts.com">Javascripts.com</A> ' ); //////////////////////////////////////////////////////////////// j = (Layer[0]) ? 0:1; for(i=j; i<Layer.length; i++) { if(document.all && No3) { document.write("<SPAN onMouseOver='clearTimeout(timer)' onMouseOut='Hide("+i+")' ID='L"+i+"' STYLE='position:absolute; visibility:hidden; background:"+background+"; top:"+Layer[i].top+"; left:"+Layer[i].left+";'><TABLE STYLE='border:solid "+menu_border+" "+border_color+"'>"+Layer[i].info+"</TABLE></SPAN>"); } else if(document.layers && No3) { document.write("<LAYER onMouseOver='clearTimeout(timer)' onMouseOut='Hide("+i+")' ID='L"+i+"' POSITION=ABSOLUTE VISIBILITY=HIDDEN BGCOLOR='"+bgcolor+"' BACKGROUND='"+background+"' TOP="+Layer[i].top+" LEFT="+Layer[i].left+">"+Layer[i].info+"</LAYER>"); } } if(document.all) { document.all["menubar"].style.visibility = "visible"; } else if(document.layers) { document.layers["menubar"].visibility = "visible"; } // --></script>
Close This Window