|
|
Dynamic Menu
Written by Premshree Pillai
http://premshree.resource-locator.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 ')
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
|
A1
JavaScripts Since 1999 - email
webmaster
|
Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. A1 JavaScript Resources is independent of Sun Microsystems, Inc.
|
