Coloured Background to Show Active Navigation Page HTML/CSS - html

Question

I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.

Answer 1

What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}

Answer 2

You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/

Answer 3

On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }