I’m creating a site for a client and wanted to jazz up the main menu slightly. Right now its just a plain text text that rolls over with a new color. It would be cooler, and just as accessible, if I made that css color fade in and out instead of just “appear”. The HTML, CSS, and JS for this with jQuery is easy as pie.

The HTML is below. Notice all I did is double up on the text in span tags. You can’t “fade” the change of a color style, but you can fade the white text in and out above the black text.

<ul>
     <li><a href=""><span class="white">Sports</span><span class="black">Sports</span></a></li>
     <li><a href=""><span class="white">Concerts</span><span class="black">Concerts</span></a></li>
    <li><a href=""><span class="white">Theater</span><span class="black">Theater</span></a></li>
</ul>

CSS. Position that white span tag absolutely so its above the black, and what you see.

#header ul li {
float:left;
font-size:80%;
font-weight:bold;
margin-top:2px;
text-transform:uppercase;
}
#header ul li a {
color:#fff;
display:block;
height:18px;
padding:3px 15px 0 12px;
text-decoration:none;
}
#header .white {
color:#fff !important;
position:absolute;
}
#header .black {
color:#000 !important;
}

The throw in a line of jQuery to manipulate that absolutely positioned white span to fade in and out above the black for a cool fading effect on hover.

$("#header li ").hover(function(){$(this).find('.white').fadeOut("medium");},function(){$(this).find('.white').fadeIn("medium");});

This entry was posted on Saturday, February 28th, 2009 at 7:32 pm and is filed under All, CSS, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.