Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Directory Navigation Highlighting Code

Javascript navigation highlighting and you are here navigation

6:39 pm on Dec 9, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 9, 2003
votes: 0

Here is some code I have developed for automatically highlighting your navigation based on your website directory structure. There is also an optional "You > are > Here" navigation it builds as well.

The link to the js file is:

10:44 pm on Dec 9, 2003 (gmt 0)

New User

10+ Year Member

joined:Dec 9, 2003
votes: 0

Here is the Code in the JS file and how to use it.
-- Cpear

This Javascript code Highlights navigation Text links based on your directory structure.
It has been designed to highlight links based on a 2 level navigation system, Global navigation and Sub Navigation.
To see an example of this code in work checkout this site [calcityairport.com....]
It also provides an optional "you are here" navigation.

This script works only with well structured web sites using a good naming scheme that is very descriptive.

**Instructions: How to use this script**

1) You must have a directory structure that is named after your navigation system. You must give the links
in your navigation id attributes that are the same as the names you have for your directories.
ex. if you have a main directory named "Joe" you must have a link in your html that looks like
<a id="Joe" href="#">Joe</a>

For Second level nav you need another directory and link named the same way and the second directory must live under
the first directory.
ex. Directory Structure: Joe/Fun_Stuff/
<a id="Joe" href="#">Joe</a>
<a id="Fun Stuff" href="#">Fun Stuff</a>

Note: From the example above you can see that The global nave "Joe" will be highlighted as well as the sub nav
"Fun Stuff". If you have directories with more than one word like "Fun Stuff" be sure to use the
underscore "_" to substitute spaces when you name the physical directory.

Make sure to add the id attribute to all of your links and remember that the id name must be the same as the directory.

2) In the while loop below you must provide all the top level (the Joe level) directories. So the code will know when
to stop going up anymore levels when it breaks down the structure. The while loop is on or near line 75 of this file.

3) In your html file you must link this file in your head section.
<script src="nav.js" language="JavaScript"></script>

4) In your body tag you will need an onLoad.

And that should be all you need. As long as the Directory structure matches up with your id tags in your navigation
it should work fine. You can also change the color highlighting and any other font styles you like near the
bottom of the page. This code has been setup to work in all browsers, but I have only really tested it in
IE and Netscape 6 browsers and higher.

I also have a version of this script for people who use images as there navigation links instead of just text.
e-mail me if you would like to see this version.

Feel Free to edit and change this script at your leisure, but please give me credit as the originator of the script.
Originator: Colin Pear
email: cpear@pearweb.com
website: www.pearweb.com
December 9, 2003

Email me if you need help or have any questions

//This is the entire URL
var currentUrl = document.location.href.split("/");
//This is the file name we are accessing and its extension.
var fileName = currentUrl[currentUrl.length - 1].split(".");
//This is the file name WITH OUT file extension, and properly formated with spaces
var fileTitle = fileName[0].split("_").join(" ");

var folderTitle = new Array();
var x=2;
var y=0;
folderTitle[0] = currentUrl[currentUrl.length - x].split("_").join(" ");

These are the names of the main directories that are the links for the Global navigation. In other words,
these are the main sections of the website.
while (folderTitle[y]!= "Recreation" && folderTitle[y]!= "Airport Services" && folderTitle[y]!= "Business" && folderTitle[y]!= "Contact" )
folderTitle[y] = currentUrl[currentUrl.length - x].split("_").join(" ");

//This is the varibale we use when we write out the You are Here Navigation.
//Do a document.write(youAreHereNav) in your html if you would like to have
//this navigation on your page. This is OPTIONAL
//ex. You > Are > Here
//ex. Joe > Fun Stuff > etc...
var youAreHereNav = "";
var levelUp = "";
for (var i = folderTitle.length-1; i >= 0; i--)
for (var j = i-1; j >= 0; j--)
{ levelUp = levelUp + "../"; }
youAreHereNav = youAreHereNav + "<a class='youAreHere' href='" + levelUp + "index.html'>" + folderTitle[i] + "</a>";

if (i!= 0)
{ youAreHereNav = youAreHereNav + " > "; }


if (fileTitle!= "index")
{ youAreHereNav = youAreHereNav + " > " + fileTitle; }

//This is the Global Navigation id
var globalNav = folderTitle[folderTitle.length-1];
//This the Secondary navigation id
var secondaryNavTitle = folderTitle[folderTitle.length - 2];

//Here is where you set the actuall colors and look and feel of the navigation.
function navigation()
//Different browsers handle layers differently so we set layerObject based on the browser version
var ns4 = (document.layers);
var ie4 = (document.all &&!document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

//Set the color of the Global navigation If the link exsists
if ( document.layers[globalNav])
{ document.layers[globalNav].style.color = "#00CC00"; }

//Set the color of the sub navigation If the link exsists
if ( document.layers[secondaryNavTitle])
{ document.layers[secondaryNavTitle].style.color = "#00CC00"; }

else if(ie4)
//Set the color of the Global navigation If the link exsists
if ( document.all[globalNav])
{document.all[globalNav].style.color = "#00CC00";}

//Set the color of the sub navigation If the link exsists
if ( document.all[secondaryNavTitle])
{ document.all[secondaryNavTitle].style.color = "#00CC00";}

else if(ie5 ns6)
//Set the color of the Global navigation If the link exsists
if ( document.getElementById(globalNav))
{ document.getElementById(globalNav).style.color = "#00CC00"; }

//Set the color of the sub navigation If the link exsists
if( document.getElementById(secondaryNavTitle))
{document.getElementById(secondaryNavTitle).style.color = "#00CC00";}