Using CSS to create rollovers

Since the introduction of the image object in Netscape 3, web designers have been using text in GIFs and JavaScript to create graphical navigation bars. For a long time this was the only way to achieve this eye-catching effect, but finally increased support for the CSS1 spec is beginning to change the situation. It is now possible to create light, functional, standards-compliant equivalents to JavaScript rollovers using nothing more than HTML and CSS1.

To show you what this might look like, the link below shows a navigation menu for a fictional pizza delivery company. In order to see the example below correctly you will need a browser with good CSS support, such as Internet Explorer 5+, Netscape 6, Mozilla or Opera 5.

Click here to view the example
(opens in a new window)

Advantages

As you can see, the CSS menu shares much of the same appearance and functionality of the JavaScript version. It also benefits from several important advantages:

• File size
  Graphically-generated rollovers usually add significant weight to the overall file size of a page. Two sets of GIFs for each button, plus the associated JavaScript code seems excessive for what is essentially nothing more than a list of links. Download time is of particular importance for a menu bar used for navigation, since any delay to the appearance and functionality may cause disorientation for your visitors.
• Accessibility
  Plain text is generally more accessible than images. It can be read by all types of browsers and easily indexed by search engines. Additionally using CSS prevents the need for JavaScript (which is not universally supported) and allows control of pseudo classes such as :visited and :active to provide further navigational clues.
• Maintainability
  Adding links or making changes to a graphical navigation bar can be a lot of trouble. Even the simplest alteration requires the editing of images and/or JavaScript code. With the CSS method, changes to the text are as easy as editing a link, and site-wide changes in appearance can be implemented simply by editing the global stylesheet.

Disadvantages

Too good to be true? Well, sort of. There are a couple of obvious disadvantages to using this approach over the classical JavaScript rollover:

• Font styling
  When creating graphical rollover images, you have access to a wide range of fonts and effects. Using CSS your choices are much more restricted, since you are relying on user-installed fonts and CSS font styling effects.
• Backward compatibility
  As mentioned above, the CSS method only functions correctly for a limited range of browsers. Even so, roughly 85% of your audience should see the CSS menu in its full glory, while the rest are served a simple but usable list of links (see below for more on backward compatibility).

How it works

So, hopefully I've convinced you of the benefits of this new method, let's take a look at how it's done. We'll begin by taking a look at the HTML required:

<div id="navi">
   <div>
      <a href="#">Express Pizzas Home</a>
   </div>
   <div>
      <strong>Online Pizza Orders</strong>
   </div>
   <div>
      <a href="#">Our Delivery Promise</a>
   </div>
   <div>
      <a href="#">Special Promotions</a>
   </div>
   <div>
      <a href="#">Contact the PizzaMaster</a>
   </div>
</div>

"That's it?" I hear you cry. Well, almost. Just slot it in where you want the navigation and update the links. We've included our list of links, with each entry enclosed in a DIV so that it appears on a new line. The current page is wrapped in a strong tag, to make the current location clear. The whole thing is then wrapped in another DIV with an id of navi, so that we can manipulate the elements with CSS in our stylesheet.

Linking the stylesheet

In order to style the elements of the navibar, we need to link to our global stylesheet. Unfortunately, the CSS required is not correctly implemented in browsers before version 5, so we need to hide this stylesheet from older browsers to prevent them from breaking the page. This can be achieved using the @import syntax. Include the following code in the HEAD of your page:

<style type="text/css">
<!--
@import "navibar.css";
-->
</style>

This is a very important step! Including the navibar style in a standard linked stylesheet will break the page badly in Netscape 4 and Internet Explorer 3 and 4. In Netscape, users won't even be able to click on the links! Of course, it is still possible to link to another stylesheet as well as this one, by including additional statements in the document HEAD.

The Stylesheet

So now we've written the HTML and included the stylesheet, let's take a look at the CSS required to wrap things up. Here's what the stylesheet navibar.css looks like:

#navi a , #navi strong {
	color: #000;
	font: 12px Arial,Helvetica,sans-serif;
	text-decoration: none;
	border: 1px solid #000;

	display: block;
	width: 162px;
	padding: 3px 5px;
	margin: 7px;
}

#navi strong {
	font-weight: bold;
	background: #DDD;
}

#navi a {
	background: #FFF;

}

#navi a:hover {
	background: #999;
}

The stylesheet is divided into four declarations. The first applies style to both the anchors and the strong tag. The second and third add additional styles to those elements separately. The fourth declaration is for the "mouse-over" state of the anchors.

The statement that give the CSS navigation bar its functionality is display: block;. It converts the <a> and <strong> tags from inline elements to block-level elements, which allows them to be treated as solid rectangular boxes. These boxes can then be assigned a size and styled using other CSS statements.

Backwards Compatibility

Because the HTML required is very straightforward the result is, naturally, backwards compatible degrading to a simple list of links:

Of course, this might not be ideal under certain circumstances, so here's an alternative way of coding the navibar for backwards compatibility. Change the HTML to the following:

<div id="navi">
   <a href="#horz">Express Pizzas Home</a>
<span class="hidden">|</span>
   <strong>Online Pizza Orders</strong>
<span class="hidden">|</span>
   <a href="#horz">Our Delivery Promise</a>
<span class="hidden">|</span>
   <a href="#horz">Special Promotions</a>
<span class="hidden">|</span>
   <a href="#horz">Contact the PizzaMaster</a>
</div>

Then add the line span.hidden { display: none; } to the stylesheet. This will display the navibar as a horizontal list of links separated by a vertical bar:

By setting the style of the | symbols to display: none, they will be hidden completely from the full version of the bar, which will appear the same as it did before.

Customisation

For this article, the code has been kept extremely simple for the purpose of clarity. Using the full power of CSS there are many possible additions that can be made. Here are a few ideas for some additional changes to the basic code:

• Use of background images
• :visited, :active and :focus states with different styles
• Other CSS text styling (text-align, letter-spacing, border decoration)
• Use of the title tag within the anchors to provide tool tips that give additional information on each link