You Are Here

Using CSS-styled unordered lists to make Web page navigation menus seems to have become a consensus "Best Practice" among Web developers — for good reason. Navigation lists are semantically correct, easily styled and accessible. Mark Newhouse popularized the technique in an article for A List Apart, Eric Meyer extended the method to include drop-down menus, his techniques were made cross-browser compatible (with a little JavaScript) by Patrick Griffiths and Dan Webb.

Two people have given us icing for the cake, by way of providing techniques for changing the style of the link to the page the visitor is currently on in order to highlight the navigation list with a "You Are Here" indicator. Jason Pearce wrote a server-side ( PHP) solution, also at A List Apart, and Jon Hicks has a pure CSS solution on his Web site.

This article presents something along the lines of those two: a JavaScript "You Are Here" indicator. The script relies on the browser being CSS, JavaScript and DOM enabled, unlike the two above which require only CSS, but might be found suitable for people without access to PHP who would like a low-maintenance way of highlighting the current page in a navigation list.

Here's the script:

The script does this (by line numbers):

  1. (1-3) checks to see if the browser is DOM compliant and if not gives up right away.
  2. (5) creates an array out of the attributes of the element with the specified id. Be sure to change the id if you've given your navigation list an id other than "nav".
  3. (6) creates an array of the anchor elements within "nav'.
  4. (7-8) loops through the array of the anchors in the "nav" element looking for those where the href attribute of the element is the same as the href attribute of the current browser location.
  5. (9) when the loop finds the page it's on, change the style attributes of that anchor tag.

The IE Work-Around

Almost has to be one of those, right? What we'd really like to do is dynamically change the CSS class applied to the anchor so we could control the entire appearance of the link representing the current page from within the style sheet. Like this—

page[i].setAttribute("class", "thisPage");

Unfortunately, Internet Explorer does not recognize the "setAttribute" method so we're stuck with having to set the style attributes independently. You can change other style attributes simply by changing the contents of line 9, and you can change multiple attributes by appending more lines, like:

page[i].style.textDecoration = "underline"; page[i].style.color = "#ffffff"

...and so on, adding as many lines as you need.

If you put this script in an external file, link to it in each page head and call it on body load—

<body onload="thisPage">

—then you'll be able to control the rollover effect on all pages from that one file.

And remember that JavaScript hates dashes, so you have to translate any style declarations with dashes to camel case: in other words, "border-left" becomes "borderLeft".

Here's a real simple example (this will open a new window) of the script at work on a set of four pages.

For a quote, a question or just to shoot the breeze: