Use CSS to Show the Current Nav Point
Here’s a quick but useful CSS technique. Learn it, and love it – this technique will let you do with CSS what other people have to do with a scripting language. (Remember: the less scripts you run on a page, the faster your site will load. Make the computer do less.)
First, let’s start with some example nav code:
<ul> <li><a class="home" href="/">Home</a></li> <li><a class="about" href="/about/">About us</a></li> <li><a class="contact" href="/contact/">Contact us</a></li> </ul>
The important thing to note is that each nav item has it’s own distinct class. After you’ve given each nav item a class, move on to your body tag.
For the body tag on each page, give it an id that matches the class name you gave that page in the nav. (So, the body tag for “About Us” would have an id of “about” and so on.)
Last, make a CSS rule to make the magic happen…
<code>#home .home, #about .about, #about .about, #contact .contact
{
text-decoration: underline;
}
Obviously, you would make the CSS rule do whatever it is you actually need to happen – but hopefully you get the idea. When the nav class and the body id coincide for any item, that rule takes effect.