Use the links below to share Rollover Lite: A CSS Rollover Everyone Can Enjoy on your favorite social networks.
Back to the Article >>
Rollover Lite: A CSS Rollover Everyone Can Enjoy
August 27th, 2008 in Design Tips & Tutorials
by: Matthew Griffin
I realize that there are about a million rollover tutorials out there. Some use JavaScript, some use CSS, but there are very few that are geared toward creating semantically correct rollovers that degrade gracefully. That's exactly what I'll be doing here.
Using rollover effects on navigation buttons has been the standard for just about as long as I've been designing websites. If fact, I still have nightmares about rollover malfunctions in Front Page 2000. Does anybody remember Front Page extensions? Fortunately, we've come a long way since then. We don't need proprietary Microsoft extensions or even JavaScript. We can do it all with CSS. In this example, I'll be using an unordered list and some links to build a horizontal navigation bar. Then I'll be adding some CSS to create a super light rollover effect. Here's the HTML:
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>
</div>
This is a great example of semantic markup that will degrade gracefully in just about any situation. I'm using list items to contain my navigation links because that's exactly what they are: a list of links. Slap this HTML in a page and preview it in a browser and you will find that the navigation links appear and function as necessary. It's not real pretty, but it works. This should be the test for any new HTML page. When you take away the images, the style, and the Flash, does it still work?
Building the Nav Buttons
But we want more than just a website that works—we want it to look good. Next, I'm going to create a set of navigation buttons that have the inactive state of the button in the upper portion of the graphic and the rollover state in the lower part of the graphic. I'll create one of these graphics for each link. When lined up side-by-side, they should look something like this:
Now all I have to do is add some CSS to my page to make the rollovers function.
Dropping in the CSS
Adding rollover effects with CSS is actually pretty easy. First I'm going to set up my <a> tag properties so that they function more like <div>s. To do this I must set their display property to "block". Then I'll add a height and width to each <a> element that corresponds to the graphics we created in the last step. It's important here that the height of each <a> element is set to half of the height of its corresponding graphic. This will allow only the top half—the inactive state of the button—to show.
Next, I'll set my buttons as backgrounds for their corresponding links. Then I'll use the pseudo-class "hover" to nudge the background up when the mouse hovers over the button. This will reveal the rollover state of the graphic. Since both the inactive and rollover state of the button are downloaded together as one image, there is no need for pre-loading images and no possibility of annoying rollover delay.
Finally, in order to hide the text links that are in the actual HTML markup, I will set the text-indent property to a negative number. Here's what the CSS should look like:
display: block;
height: 30px;
text-indent: -9999px;
}
#nav li { list-style: none; float: left; }
#nav li.home a { background: url(images/lite_rollover_01.gif) no-repeat; width: 92px; }
#nav li.about a { background: url(images/lite_rollover_02.gif) no-repeat; width: 131px; }
#nav li.services a { background: url(images/lite_rollover_03.gif) no-repeat; width: 130px; }
#nav li.contact a { background: url(images/lite_rollover_04.gif) no-repeat; width: 147px; }
#nav li.home a:hover { background: url(images/lite_rollover_01.gif) no-repeat 0 -30px; }
#nav li.about a:hover { background: url(images/lite_rollover_02.gif) no-repeat 0 -30px; }
#nav li.services a:hover { background: url(images/lite_rollover_03.gif) no-repeat 0 -30px; }
#nav li.contact a:hover { background: url(images/lite_rollover_04.gif) no-repeat 0 -30px; }
There you have it. Not only does this simple CSS rollover eliminate the flicker that JavaScript rollovers are susceptible to, it degrades gracefully and requires less code. Here's a link to a live example. Feel free to copy code and images.
One More Application
The text-indent trick is also a good one to use to increase the accessibility and search engine friendliness of graphics that contain lots of text. This goes for graphics that don't have a rollover state at all. For example I could create a <div> and set its background to an image with information about how to contact my business. Then I could type the information from the graphic directly into the <div> and set the text-indent of the <div> to -9999px. The graphic would be visible to the visitor and the text would be visible to search engines. This is also helpful to blind users and mobile users who have styles disabled.
- 21 Comments
- 14191 Views