Introduction
Well, here I am not talking about DHTML drop-down/pull-down menus. Here I am talking about a simple navigation menu
using Javascript which identifies the active page and accordingly displays that link differently from the other
links so that it's easy for the user to navigate.
Here I will use a single .js file that will be used for all the pages under the
navigation menu. So you need not update all the pages but have to update only one javascript library file (.js file)
For example consider 3 links viz. "www.qiksearch.com", "Articles", "Javascripts".
 www.qiksearch.com is active |
 Articles is active |
 Javascripts is active |
You can take a look at such a navigation menu at http://www.qiksearch.com
Explanation
As you can see above, these are shots of how the navigation menu appears at different pages depending
on the active link. These menus are generated by a single javascript file.
Well, it is possible to create such a menu using just Cascading Style Sheets (CSS) by defining a
class say .links for the menus and then giving different properties
for .links:active. So your work is done just by using a CSS file.
Though this is perfect, there is an advantage if you use Javascript here. As you can see in the
above shots, the active link has "»" character in the end. This is created only for
the active link, i.e it is created dynamically. Here, you may use any character or iconic image that will
make the link really look active.
Implementation
To implement such a navigation menu, first of all you will need a CSS file,
say links_style.css for defining 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"
that are the names of the links. Another array "links_text" which consists of
the text of the links (eg. Javascripts).
The former one will be used for comparison. Name the various elements in the links
array as the link files but without the extension (i.e if the first link takes you to
index.htm name it index).
The third array called "links_url" is the URL to which a link will take you.
Now, what we want is to compare each element in the array links to the
current page's file name without the extension and accordingly assign it a style and whatever extra text or
image you want to add to the link text if that particular link is 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.qiksearch.com/index.htm then
loc will be index.
Now we compare this with each element in the array links. First element of this array
and loc are equal thus we write this link in the following way. (Replace each instance of ' (i.e a single quote)
within document.write('.....') by ')
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>');
Since other elements in links 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>');
Thus, finally you get a dynamic menu. The only codes you will have to place in all pages are :
<script language=";javascript"; src=";nav.js";></script>
Place this code where you need the navigation menu on the page.
The other code that you require is
<link rel=";stylesheet"; href=";links_style.css";>
This code must be placed in the <HEAD> section of your HTML page.
Listing 1 nav.js
var links = new Array (";index";, ";articles";, ";javascripts";);
var links_text = new Array (";www.qiksearch.com";, ";Articles";, ";JavaScripts";);
var links_url = new Array (";index.htm";, ";articles.htm";, ";javascripts.htm";);
var loc=String(this.location);
loc=loc.split(";/";);
loc=loc[loc.length-1].split(";.";);
loc=loc[loc.length-2];
function qiksearch_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>');
}
}
qiksearch_menu_gen();
Listing 2 links_style.css
.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 navigation of web pages.Please do mail me your comments/suggestions.
© 2002 Premshree Pillai
Web : http://www.qiksearch.com
