Coloured Background to Show Active Navigation Page HTML/CSS

Question

I have a simple html menu that is styled using CSS.

<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></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"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

And the markup for career.html would look like this:

<div id="menu">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li class="active"><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></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"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>
</div>

Then do CSS for the background:

#main li.active { background-color:red; }