Click here to Skip to main content
Click here to Skip to main content

Dynamic Menu

, 2 Dec 2002
Rate this:
Please Sign up or sign in to vote.
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.
<!-- Add the rest of your HTML here --> <!-- (c) Premshree Pillai, http://www.qiksearch.com, qiksearch@rediffmail.com -->

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 &#39;)

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

// 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

Share

About the Author

premshree
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 PinmemberGiles2-Dec-02 23:46 
GeneralRe: Formatting PineditorBarry Lapthorn3-Dec-02 10:41 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150301.1 | Last Updated 3 Dec 2002
Article Copyright 2002 by premshree
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid