Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Article

Dynamic Menu

Rate me:
Please Sign up or sign in to vote.
2.00/5 (6 votes)
2 Dec 20023 min read 116.3K   20   2
Create a 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.

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 :

JavaScript
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 ')

JavaScript
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

JavaScript
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

JavaScript
// Qiksearch Menu v 1.0
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// qiksearch@rediffmail.com

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
The author is an engineering student in Mumbai, India and is a programming enthusiast. You can visit his site at http://www.qiksearch.com

Comments and Discussions

 
GeneralFormatting Pin
Giles2-Dec-02 22:46
Giles2-Dec-02 22:46 
I think you may need to be a bit more careful with your <pre> </pre> tags
GeneralRe: Formatting Pin
Barry Lapthorn3-Dec-02 9:41
protectorBarry Lapthorn3-Dec-02 9:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.