Build a Dynamic Menu in JavaScript
About the Author
Premshree Pillai
Premshree studies engineering in Information Technology at Mumbai
University, India. He's written articles for a range of popular Indian IT magazines, and his site, QikSearch has featured in 'Digit' Magazine - India's No. 1 technology magazine.
By: Premshree Pillai
February 3rd, 2003
Here, we're not talking about DHTML drop-down/pull-down menus. Here, we're talking about a simple navigation menu using Javascript. It identifies the active page, and accordingly displays that link differently from the other links, making it easy for the user to navigate.
Here we'll employ a single .js file that will be used for all the pages under the navigation menu. So you need not update all the pages: you'll have to update only one javascript library file (.js file).
For example, consider these 3 navigation links:
Link 1 is active.
Link 2 is active.
Link 3 is active.
As you can see, these are shots of how the navigation menu appears at different pages depending on which links is active. These menus are generated by a single javascript file.
It's possible to create such a menu using only Cascading Style Sheets (CSS), by defining a class (say .links) for the menus, and assigning different properties for .links:active. So you can create the menu just by using a CSS file.
Though this is perfect, there is an advantage to using Javascript here. As you can see in the above shots, the active link has the "»" character in the end. This is created only for the active link, therefore it's created dynamically. With JavaScript, you can use any character or iconic image that will make the link really look active.
Implementation
To implement this type of menu, first of all you will need is a CSS file, say links_style.css, to define the styles for the links. Next comes the Javascript file nav.js.
In the file nav.js, first of all we declare three arrays. One array, called "links", includes the names of the links. Another array is called "links_text", and consists of the text of the links (eg. Link 1). The former will be used for comparison against this file. Name the various elements in the links array using the titles from the link files, excluding the extension (i.e. if the first link takes you to index.htm, name it index). The third array, called "links_url" includes the URL to which a link will take the user.
Now, what we want is to compare each element in the array links to the current page's file name without the extension. We'll then accordingly assign the link a style, and whatever extra text or image you've decided to add to the link text to highlight the active page.
Let loc be the comparison string. loc can be found as :
var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];
Thus if current page is http://www.sitepoint.com/index.htm then loc will be index. Now we compare this with each element in the array links. The first element of this array and loc are equal, thus we write this link in the following way.
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>');
As the other elements in the links array are not equal to loc, they will be written as:
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>');
And that's your dynamic menu!
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!