<\/p>\n<\/p>\n
I\u2019ve developed a trick over the years that I\u2019ve used on a number of websites now for making my sites\u2019 navigation bars \u201cintelligent\u201d or \u201cself-aware.\u201d 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\u2019ve found it so useful, I thought I should share it with you, even though it does involve a smidgen of JavaScript. <\/p>\n
I start with an unordered list that looks something like this:<\/p>\n
<ul id=\"nav\">\n\t<li><a href=\"\/about\/\">About Us<\/a><\/li>\n\t<li><a href=\"\/contact\/\">Contact Us<\/a><\/li>\n\t<li><a href=\"\/archives\/\">Our Archives<\/a><\/li>\n\t<li><a href=\"\/free\/\">Free Stuff<\/a><\/li>\n<\/ul><\/pre>\nThen I turn the unordered list into a navigation bar, using the technique I described in my last article.<\/a> I won\u2019t delve into those details here, for the sake of brevity and my fierce, fierce (fierce!) hatred of repetition, but you might want to read the prior post first if you missed it. The navigation bar gives me tabs that expand nicely for different text sizes and respond by growing and changing color when people hover over them. <\/p>\nBut what if you want to somehow indicate to your users which page or section of the site they\u2019re currently visiting? For that, I use the following JavaScript magic:<\/p>\n
function setActive() {\n aObj = document.getElementById('nav').getElementsByTagName('a');\n for(i=0;i<aObj.length;i++) { \n if(document.location.href.indexOf(aObj[i].href)>=0) {\n aObj[i].className='active';\n }\n }\n}<\/pre>\nThis tiny little function does four things:<\/p>\n
\n- Finds all of the anchor tags (via getElementsByTagName) inside of the element with the \u201cnav\u201d id (getElementById) \u2013 our unordered list, in this case.<\/li>\n
- Cycles through every anchor tag that we\u2019ve found (our \u201cfor\u201d loop).<\/li>\n
- Compares the \u201chref\u201d of the anchor tag with the page we\u2019re 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.<\/li>\n
- If the href is a match for the page we\u2019re on, it sets a class of \u201cactive\u201d on the anchor tag (className=\u2019active\u2019).<\/li>\n<\/ol>\n
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:<\/p>\n
window.onload = setActive;<\/pre>\nAfter that comes the CSS. Because we\u2019ve used our JavaScript to set a class of \u201cactive\u201d on our tab, all we need to do is style the active class. I usually do something fairly simple like the code below, which make the tab drop down from the top, applies a background color, and gives it a dark border on all sides but the top:<\/p>\n
ul#nav li a.active {\n\tpadding-top: 15px;\n\tbackground-color: #075a97;\n\tborder: 1px solid #333;\n\tborder-top: none; \n}<\/pre>\nAnd voila! Your navigation bar suddenly knows and indicates exactly where you are, without having to remember to specify any extra IDs on the body tag or navigation links. You can see it in action here.<\/a><\/p>\nAs a caveat, this technique assumes that you\u2019re not linking to a lot of commonly-nested directories in your navigation. For instance, if you have one tab going to \u201c\/blog\/\u201d and another to \u201c\/blog\/archive\/\u201d, then both tabs will inherit the \u201cactive\u201d class when you\u2019re 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 \u2013 for instance, linking to \u201c\/blog\/index.php\u201d instead.<\/p>\n