Most websites highlight the navigation item of the user’s location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you’ll need to tweak the HTML code behind the navigation for each and every page. So is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is but the answers below require a lot more tweaking than is below if you are using Dreamweaver templates- but that’s for a post next week
But what you need to do is assign a class to each navigation item:
<ul>
<li><a href=”#” class=”home”>Home</a></li>
<li><a href=”#” class=”about”>About us</a></li>
<li><a href=”#” class=”contact”>Contact us</a></li>
</ul>
You’ll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id=”home”>, in ‘About Us’ it should be <body id=”about”> and in ‘Contact Us’ <body id=”contact”> etc.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
css rules go here
}
This creates rules that only takes effect when class=”home” is contained within id=”home”, and when class=”about” is in id=”about” and class=”contact” is in id=”contact”. These situations will only occur when the user is on the appropriate page, seamlessly creating our highlighted navigation item. Pretty cool!
More of this type of thing can be found here.
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml