CSS Menus
Uberlink CSS Rollovers: Overview

by Al Sparber

What if you could make a great looking CSS navigation bar that looked and behaved like an image swapping menu? And what if it used just two images to power an unlimited number of links? Would you like to learn how to make a menu that looks like this:

If so, please do continue reading.

Note: Please follow along with the code as it is displayed in the course of this tutorial rather than as it's marked up in the actual source code. The styles we are using to render the menus on this page are written to allow us to display multiple instances of the same menu.

Defining a herd of wild links

How does one describe a series of links, one after the other-row after row? If you're prone to whimsy, you can think of a gathering of links; a gaggle of links; or perhaps a swarm of links. Or you can get pragmatic and call them a list of links. Well... if you think about it, that's exactly what they are. A List.

Practical and Accessible

In January 2003, we began development of our Series II Design Packs. Three of our main goals were to make each of these Packs as pretty as possible, to use standards-based markup, and to conform to accessibility guidelines (Section 508 and WAI). When it came time to design the sub-navigation areas, we settled on using unordered lists. Here is what an unordered list's code looks like:

<ul>
<li>Home</li>
<li>Page One</li>
<li>Page Two</li>
<li>Page Three</li>
</ul>

And here is how that code renders in a browser:

• Home
• Page One
• Page Two
• Page Three

If this looks like a bulleted list, you're right. But with the magic of CSS (and a little imagination) we can make a list of links look like much more than a plain old unordered list. We can make it come alive.

The plan

Simply stated, we are going to build a list of links that looks and acts like an image-based navigation bar... complete with image swapping. Instead of using JavaScript behaviors, our image bar will use CSS. Instead of using two images for each link, we'll use two images in total.

The design goals

The styles we write need to accomplish our main design goals, which are:

• The links in our list need to use background color, borders, and a background image to simulate the look of a graphical button.
• When the links are hovered over, the entire link needs to light up (highlight) like a Fireworks or Photoshop swap image construct.
• The default bullet image needs to be hidden.
• The individual list items need to be flush left and not indented.

Containing the list

To make our list portable, and to ensure that we don't affect other lists on our site (which should remain looking like conventional lists with bullets and indents and such), we'll define a containing element within which we'll place our list.

Write this rule in your style sheet:

#navlist {
	position: absolute;
	left: 36px;
	top: 86px;
	width: 186px;
}

Important: If you are not sure about how to write CSS rules in Dreamweaver (or mannually), please refer to our CSS Intro Tutorial before continuing.

In this instance, the list is truly portable as we're defining its containing element as absolutely positioned. In Dreamweaver-speak, this means we're talking about a "Layer". By placing the list inside an absolutely positioned DIV, the menu can be placed on the page with pixel-precision. Should you need to insert the menu inside a table cell, or if you need to float it, you can simply remove the position, left, and top properties from the #navlist rule.

Now we'll write the markup (in Code View) for the DIV that will house the list :

<div id="navlist">

</div>

Inserting the list

Let's insert an unordered list of five links. Use an octothorpe (#) to create test "links" and label your links: Home, followed by Page One through Page Five.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
<li><a href="#">Page Five</a></li>
</ul>

The list should render like this:

• Home
• Page One
• Page Two
• Page Three
• Page Four
• Page Five

Removing the bullets and indent

To remove bullets and indents we'll use the <ul> selector. Here is the rule:

#navlist ul {
	margin: 0; /*removes indent IE and Opera*/
	padding: 0; /*removes indent Mozilla and NN7*/
	list-style-type: none; /*turns off display of bullet*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}

Note: Some browsers control list indents through the margin property while others use the padding property, so we use both!

Vertical space between list items

To add some vertical space between each list item we can use the margin property of the <li> element. Let's set a bottom margin of 3 pixels, so that each link in the list is separated by 3 pixels vertically. Here is the rule:

#navlist li {
	margin: 0 0 3px 0;
}

Note: When margin (and also padding or border) values are declared in shorthand, the values are represented in this order: Top, Right, Bottom, Left. Therefore, margin: 0 0 3px 0; is the same as: margin-top: 0; margin-right: 0; margin-bottom: 3px; margin-left: 0;

The list should now render like this:

The home stretch

Now let's set the link styles to bring our list to life. Here are the rules:

#navlist a {
	/*/*/display: block;
	padding: 2px 2px 2px 24px;
	border: 1px solid #333;
	width: 160px;
	background-color: #999;
	background-image:  url(assets/l1_down.gif); /* */
}

Display: block is the declaration that enables the entire link box to be "hot" or "clickable". Padding provides some space between the borders and the text inside. Width is an arbitrary measure and is contingent on the layout. It sets the width of the virtual button and is derived mathematically by taking the width of the containing element (#navlist is set to 186px) and subtracting from it, the aggregate width of the left and right padding values on the <a> element, which in this case equals 26 pixels.

Here is the background image we are using:

The image is intentionally made oversized to make sure that if a user resizes the text in his or her browser, the background will render without tiling unless there are more than two lines of text or the user makes text size extraordinarily large!

Note: the double nested comment tags (/*/*/ terminating with /* */) create a CSS filter that effectively hides what is written between them from Netscape 4, which would choke and die if it tried to render some of these styles. Hiding can also be achieved by using both a linked and an imported style sheet.

#navlist a:link, #navlist a:visited {
	color: #000;
	/*/*/color: #EEE;
	text-decoration: none; /* */
}
#navlist a:hover {
	border: 1px solid #333;
	background-color: #FF6600;
	background-image:  url(assets/l1_over.gif);
	color: #333;
}

The above rules set the pseudo anchor classes and provide the "look" for links in default, visited, and hover states. We left the active state out as it serves no particular purpose in this design study. The first color declaration in the #navlist a:link, #navlist a:visited rule sets link text color for Netscape 4 to black (#000) since that browser cannot render the background color. The second color declaration sets text color for modern browsers to light gray (#EEE).

Here is the fullsize hover image:

Here be the styled list

The list should now render like this:

The uberlink

No navigation system would be complete without the ability to mark the link that is associated with the current page... a "you are here" reminder to keep your visitors oriented. To achieve this, we need one more rule. Here it is:

#uberlink a:link, #uberlink a:visited, #uberlink a:hover {
	/*/*/border: 1px solid #333;
	background-color: #FF6600;
	background-image:  url(assets/l1_over.gif);
	color: #333; /* */
}

If you notice, the rule contains the exact same declarations as #navlist a:hover... only the selector is different. It combines all 3 link states that we are using (link, visited, hover).

Note: This rule is hidden from Netscape 4 because it contains the link and visited pseudo classes... and Netscape 4 will attempt to render them.

To deploy the uberlink, you assign its ID to one of the <li> tags in your link list. Let's assign it to the Home link:

<div id="navlist">
<ul>
<li id="uberlink"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
<li><a href="#">Page Five</a></li>
</ul></div>

And it will display like this:

Note: The uberlink technique serves an additional purpose. Since the uberlink uses the same background image as #navlist a:hover, your browser will have that image in cache so that hovering over the other links in the list will instantly set the background image. Without the uberlink, there would be a delay the first time you hovered over a link while the browser loaded it from your server. So the uberlink serves as a sort of CSS Preloader.

And what about horizontal lists?

With a few modifications, we can make a horizontal list. Do take note that horizontal lists do not display very well in MSIE5 on the PC so you may want to keep this technique on the back burner for a while.

Here are the rules:

#navlist {
	position: absolute;
	left: 36px;
	top: 86px;
}

Removing the width property from the #navlist rule allows our list to spread out horizontally as it needs to.

#navlist li {
	display: inline;
	list-style-type: none;
}

Display: inline sets the list items to a horizontal orientation across the containing element.

#navlist ul {
	/*/*/margin: 0;
	white-space: nowrap;
	padding: 0; /* */
}

White-space: nowrap instructs the browser to not wrap the list to a new line when the window is reduced in width. The list is displayed on a single line and the browser will spawn a horizontal scrollbar if necessary.

In some situations, IE6 may squish the first link in your horizontal list. It depends on where in the structural hierarchy the list happens to be. For instance, this page seems to be unaffected. If this becomes an issue for you, one possible solution is to insert an empty <li> tag before the first link and populate it with a non-breaking space, like this:
<ul>
<li>&nbsp;</li>
<li>Home</li>
<li>Page One</li>
</ul>

#navlist a {
	/*/*/padding: 1px 8px 1px 24px;
	border: 1px solid #333;
	background-color: #999;
	background-image:  url(assets/l1_down.gif); /* */
}

We set a bit more padding on the right to balance the link text inside the background box of our virtual button. We also reduce the top and bottom padding to a single pixel to create a more streamlined look.

Note: No other modifications to the styles are necessary.

The uberlink ID is assigned to the <li> tag of the Home link.

Looking backward and thinking forward

That's all there is to it! If you have any questions, please tune in to the PVII CSS Newsgroup.

The PVII CSS Newsgroup

The Project VII CSS Newsgroup is a growing community in which to share knowledge about all things that relate to Cascading Style Sheets. If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new account and point it at the following server: forums.projectseven.com

Newsgroup Setup Problems?

If you don't know how to set up a news account in Outlook Express or Entourage, Microsoft has dedicated instructions pages:
Mac Users Read more
PC Users Read more