Web development, coding & SEO


Highlight navigation item automatically using CSS

Same navigation code on every page - http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

How to highlight the navigation item of the user's location in the website, to help users orientate themselves.

1. Assign a class to each navigation item:

<ul>
	<li><a class="home" href="#">Home</a></li>
	<li><a class="about" href="#">About us</a></li>
	<li><a class="contact" href="#">Contact us</a></li>
</ul>

2. Insert an id into the <body> tags - <body id="home"> <body id="about"> <body id="contact">

3. Create a CSS rule:

#about .about,
#contact .contact,
#home .home{
	commands for highlighted navigation go here
}

This rule 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".

2009