Change background color of menu based on menu selection

Question

I have a horizontal css menu with 5 items.

e.g 1) Home 2) Users 3) Category 4) Products 5) Contact

When "home" is selected the background color (via css) of the entire menu div (id="topmenu") is blue.

I want the background color of the div to change to say green when "users" is selected and say purple when "category" is selected.

How can I do this?

Answer 1

You can set up multiple classes like so:

<ul> 
   <li class="Menu1 Selected"><a href="#">Home</a></li> 
   <li class="Menu2"><a href="#">Users</a></li>
</ul>

Then in your CSS you have a class set for each menu item for it's selected state:

.Menu1 .Selected
{
   background-color: #000000;
}
.Menu2 .Selected
{
   background-color: #ffffff;
}

Answer 2

<div id="topmenu">
<ul>
<li><a href="home" onclick="changeBackground('green');">Home</a></li>
<li><a href="users" onclick="changeBackground('blue');">Users</a></li>
<li><a href="home" onclick="changeBackground('purple');">Category</a></li>
<li><a href="home" onclick="changeBackground('brown');">Products</a></li>
<li><a href="users" onclick="changeBackground('orange');">Contact</a></li>
</ul>
</div>
<script type="text/javascript">

function changeBackground(color){
  document.getElementById("topmenu").style.backgroundColor = color;
  return false;
}
</script>

Something like that should do the trick I think.

Answer 3

You may want to put the individual elements into a <span> tag, in which you would have more control over the appearance of individual items.

For example:

<span id="users">Users</span> <span id="category">Category</span>

then the CSS could look something like:

span#users:hover { background-color: green; }

span#category:hover { background-color: purple; }