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");});
I’m excited! We might head to Colorado for some late season skiing in March, but if we don’t go, I’m hoping to make a late March date at Carolina Motorsports Park. We’ll see.