Variant Background Colors On Unordered List Menu

**rharris07** · 07-11-2007, 09:39 PM

Hi everyone, I tried to find info on this subject but I could not, although I could have been looking under incorrect headings. Any help with this would be greatly, greatly appreciated.

I am using CSS for an entire site, and have an unordered list set up as the navigational menu, like so:

Code:

#navlist { 
 float: left; 
 width: 170px; 
 margin-top: 30px; 
 margin-left: 5px;
}
 
#navlist ul {
 list-style: none;
}

#navlist li a{
 display: block;
 height: 28px;
 width: 130px; 
 padding: 9px;
 margin: 5px;
 background: inherit;
 border-right: 4px solid #444;
 color: #999;
 text-transform: lowercase;
 font-size: 1.8em;
}

#navlist li a:hover {
 color: #f4f4f4;
 background: #309436;
 border-right: 4px solid #cccc99;
}

#navlist li .active {
 color: #999;
 background: #333;
 border-right: 4px solid #444;
}

My question is how do I create a different color for the hover background for each selection in the menu? I have six items listed and would like for each one to have a different background color when you hover over it. Any ideas?

Thanks so much for any help!

Ryan

**Trinithis** · 07-11-2007, 10:13 PM

You need javascript.

Code:

(function() {
var baseColor = "#777";
var hoverColor = "#eee";
function overHandler(el) {
   el.style.backgroundColor = hoverColor;
   }
function outHandler(el) {
   el.style.backgroundColor = baseColor;
   }
function addEvent(el, type, func) {
   el.addEventListener?
   el.addEventListener(type, func, false):
   el.attachEvent("on"+type, func);
   }
var navLi = document.getElementById("navlist").getElementsByTagName("li");
for(var i=0, n=<navLi.length; i<n; ++i) {
   addEvent(navLi[i], "mouseover", overHandler);
   addEvent(navLi[i], "mouseout", outHandler);
   }
)();

**rharris07** · 07-11-2007, 10:47 PM

Thank you for the suggestion...but i'm not very good with javascript. if you can tell me what that is doing, I can figure it out from there on how to implement it but I'm not totally understanding how I would control each individual background with that....

**Veronica** · 07-11-2007, 11:36 PM

The javascript way is pretty easy, especially if you have a lot of pages.

But if you want to do it with pure css, you can. Let's say you have 3 pages, one.htm, two.htm and three.htm. First you would need to add an id to the body tag of each page, so for one.htm:

Code:

<body id="one">

Then you would give each href in the navigation an id:

Code:

<div  id="navlist">
<ul>
<li><a href="one.htm" id="onenav">one</a></li>
<li><a href="two.htm" id="twonav">two</a></li>
<li><a href="three.htm" id="threenav">three</a></li>
</ul>
</div>

Finally, you would add to your stylesheets, a way that basically looks to see if the body id and the href id match, and then it highlights whichever hred matches the body tag:

Code:

body#one a#onenav, body#two a#twonav, body#three a#threenav {
background-color: blue;
}
body#one a:hover#onenav, body#two a:hover#twonav, body#three a:hover#threenav {
background-color: #309436;
}

It works fine with simple sites, but if you have lots of pages, try the javascript way.

**Trinithis** · 07-12-2007, 05:21 AM

With my javascript, all you have to do is this:

Code:

**HTML Here**

<ul id="navlist">
blah, blah, blah
<ul>

<script type="text/javascript">
(function() {
var baseColor = "#777";
var hoverColor = "#0e34d1";
function overHandler(el) {
   el.style.backgroundColor = hoverColor;
   }
function outHandler(el) {
   el.style.backgroundColor = baseColor;
   }
function addEvent(el, type, func) {
   el.addEventListener?
   el.addEventListener(type, func, false):
   el.attachEvent("on"+type, func);
   }
var navLi = document.getElementById("navlist").getElementsByTagName("li");
for(var i=0, n=<navLi.length; i<n; ++i) {
   addEvent(navLi[i], "mouseover", overHandler);
   addEvent(navLi[i], "mouseout", outHandler);
   }
)();
</script>

**more HTML***

See the bolded area in the code? Change the hexidecimal values to the colors you want. And that's it! Oh, and your UL tag has to have the id of "navlist" (case-sensitive).

Thread: Variant Background Colors On Unordered List Menu

Thread Tools

Search Thread

Variant Background Colors On Unordered List Menu

Bookmarks

Bookmarks

Posting Permissions