Article
Build a Dynamic Menu in JavaScript
Page: 1 2
The code you'll have to place in all your pages is:
<script language="javascript" src="nav.js"></script>
Place this code wherever you need the navigation menu to appear on the page.
The other code that you'll require is
<link rel="stylesheet" href="links_style.css" />
which must be placed in the <head> section of your HTML page.
Therefore, listing 1 nav.js is:
/* The link details */
var links = new Array ("link1", "link2", "link3");
var links_text = new Array ("Link 1", "Link 2", "Link 3");
var links_url = new Array ("link1.htm", "link2.htm",
"link3.htm");
/* Resolve the location */
var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];
/* Menu generating function */
function dyn_menu_gen()
{
for(var i=0; i<links.length; i++)
{
if(loc==links[i])
{
document.write('<table class="explorer_active"
onmouseover="this.className=\'explorer_active\';return true"
onmouseout="this.className=\'explorer_active\';return true"
onmousedown="this.className=\'explorer_active\';return true"
onclick="location.href=\'' + links_url[i] + '\'"><tr><td>
<a href="' + links_url[i] + '" class="menu">'
+ links_text[i] + ' <b>»</b></a></td></tr></table>');
}
else
{
document.write('<table class="explorer" onmouseover="this.
className=\'explorer_over\';return true" onmouseout="this.className=
\'explorer\';return true" onmousedown="this.className=
\'explorer_down\';return true" onclick="location.href=\''
+ links_url[i] + '\'"><tr><td><a href="' + links_url[i] +
'" class="menu">'
+ links_text[i] + '</a></td></tr></table>');
}
document.write('<table cellspacing="0" cellpadding="0"
bgcolor="#FFFFFF"><tr><td></td></tr></table>');
}
}
/* Generate the menu */
dyn_menu_gen();
Listing 2, links_style.css is:
.explorer{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#B5D0FF; cursor:hand; width:150px;
height:30px; border:1 solid #A6C0ED}
.explorer_over{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#A7C0EB; cursor:hand; width:150px;
height:30px; border-right:1 solid #5C6980; border-bottom:1
solid #5C6980; border-left:1 solid #B8D3FF; border-top:1
solid #B8D3FF}
.explorer_down{font-family:verdana,arial,
helvetica; font-size:8pt; font-weight:normal;
text-decoration:none; color:#000000; background:#A7C0EB;
cursor:hand; width:150px; height:30px; border-left:1
solid #5C6980; border-top:1 solid #5C6980; border-right:1
solid #B8D3FF; border-bottom:1 solid #B8D3FF}
.explorer_active{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000;
background:#FFFFFF; cursor:hand; width:150px;
height:30px}
.menu{font-family:verdana,arial,helvetica; font-size:8pt;
font-weight:normal; text-decoration:none; color:#000000}
I hope this script simplifies the creation of dynamic JavaScript navigation for your Web pages!