Rob Glazebrook on February 20, 2008 proposed some of his ideas on how to make navigation bar self-aware or intelligent. Here is what Glazebrook has to say about his tricks:

“I’ve developed a trick over the years that I’ve used on a number of websites now for making my sites’ navigation bars “intelligent” or “self-aware.” By that, I mean that the navigation bar automatically knows which tab/button/whatever should be considered the currently active link, without having to manually specify a class or ID on either the body tag or on the links themselves. And since I’ve found it so useful, I thought I should share it with you, even though it does involve a smidgen of JavaScript.”

According to him he started with an unordered list which appears like this:

<ul id=”nav”>
<li><a href=”/about/” mce_href=”/about/”>About Us</a></li>
<li><a href=”/contact/” mce_href=”/contact/”>Contact Us</a></li>
<li><a href=”/archives/” mce_href=”/archives/”>Our Archives</a></li>
<li><a href=”/free/” mce_href=”/free/”>Free Stuff</a></li>
</ul>

He turned this unordered list into navigation bar by using the technique he described in my last article. …The navigation bar gave him tabs that expand nicely for different text sizes and respond by growing and changing color when people hover over them.”
To show users what portion of the site they are currently visiting he used this Javascript:

function setActive() {
aObj = document.getElementById(’nav’).getElementsByTagName(’a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className=’active’;
}
}
}

Functions of the above tricks:
1. Finds all of the anchor tags (via getElementsByTagName) inside of the element with the “nav” id (getElementById) – our unordered list, in this case.
2. Cycles through every anchor tag that we’ve found (our “for” loop).
3. Compares the “href” of the anchor tag with the page we’re currently on (document.location, which is the URL that shows up in the bar at the top of your browser) to see if the href is contained therein.
4. If the href is a match for the page we’re on, it sets a class of “active” on the anchor tag (className=’active’).

<br>

Then we have to make sure to run the setActive script when we load the page, so that our tab gets set as soon as the page is loaded. I accomplish that with this line of JavaScript somewhere below my setActive function within the same file:

window.onload = setActive;

“After that comes the CSS. Because we’ve used our JavaScript to set a class of “active” on our tab, all we need to do is style the active class” which is like this:

ul#nav li a.active {
padding-top: 15px;
background-color: #075a97;
border: 1px solid #333;
border-top: none;
}

And that’s it…a self-aware navigation bar!
But here’s a caveat:

“This technique assumes that you’re not linking to a lot of commonly-nested directories in your navigation. For instance, if you have one tab going to “/blog/” and another to “/blog/archive/”, then both tabs will inherit the “active” class when you’re in the archive directory (because /blog/ is part of /blog/archive/). One way to get around this limitation would be to be more specific on the first tab – for instance, linking to “/blog/index.php” instead.”

You can go to http://www.cssnewbie.com/navigation/intelligent-navigation/ for some cool stuff about this and other relevant things on CSS.

Tags: Glazebrook proposes ways on how to create intelligent n