Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Uberlink CSS List Menus (rev. 2006)

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? And what if you could easily automate highlighting the current page link? If you'd like to learn how to make such a menu, please read on.

See the finished working menu

Links in Lists

While it's not required that links be contained inside HTML lists, it is convenient, structurally logical, and fashionable to do so. Here is what unordered HTML list markup looks like:

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

And here is how the 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. Our image bar will use CSS link styles. Instead of using two images for each link, we'll use two images in total. We'll also use a simple JavaScript to automatically detect the current page and highlight the menu link tohat points to that page.

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.
  • The default HTML bullet needs to be hidden.
  • The individual list items need to be flush left and not indented.

Download the assets

To complete the project, you'll need the image files that will comprise the rollover effects and the Uberlink JavaScript file. Create a folder in your Dreamweaver site and name it assets. Right-click each of the images below and save them to your new assets folder:

The Default link background image

The Over and Uber link background image

Mac Note: Mac users who do not use a two-button mouse should Command + Click.

Download the zipped script file. Unzip it and move it into your assets folder. The Uberlink script is less than one half of one kilobyte.

Building the menu container

Define a containing element within which you'll place the list. Your menu can go inside a DIV, or even a table cell. For this exercise, we'll use an absolutely positioned DIV.

To define the container, create a style sheet on your page (or link to a new external CSS file) and write this rule:

#sidebar {
position: absolute;
left: 36px;
top: 86px;
width: 186px;
font-size: .8em;
}

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

<div id="sidebar">

</div>

Inserting the list

Insert an unordered list of five links. Use an octothorpe (#) to create the following placeholder links: Home, followed by Page One through Page Four.

Assign the UL an ID "navlist".

<ul id="navlist">
<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> </ul>

The list should render something like this:

Removing the bullets and indent

To remove bullets and indents we'll use an ID selector named #navlist, which relates to the ID assigned to the menu UL. Here is the rule:

#navlist {
margin: 0; /*removes indent IE and Opera*/
padding: 0; /*removes indent Mozilla and NN7*/
list-style-type: none; /*turns off display of bullet*/
}

Note: Some browsers control list indents through the margin property while others use the padding property.

The home stretch

Now you'll set the link styles. Here are the rules:

#navlist a, #navlist a:visited {
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid;
border-color: #ddd #000 #000 #ddd;
background-color: #999999;
background-image:  url(assets/l1_down.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: #EEE;
text-decoration: none;
}

This rule defines the default and visited link classes for our menu items. 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. The border is set to 1 pixel and solid while each border color is set individually to create a raised button effect. The background color is set to a color closely matching the background image.

The background image is set to not repeat (tile) and is positioned 0% horizontally and 50% vertically. The image is intentionally oversized to make sure that if a user resizes text, the background will render without tiling and the rectangular bullet will always be vertically centered.

Text color is set to light gray (#EEE) and text-decoration (underlining) is turned off.

#navlist a:hover {
background-color: #9F6F9F;
background-image:  url(assets/l1_over.jpg);

color: #2D1E2D;
}

The above rules defines the pseudo hover class, which sets a new background image (simulating a JavaScript swap image) and a change of the text color.

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.

#sidebar #navlist .uberlink {
background-color: #9F6F9F;
background-image:  url(assets/l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: #333 !important;
font-weight: bold;
cursor: default;
}

The #sidebar #navlist .uberlink class sets the same background color and image as the #navlist a:hover class. Beyond that, we'll change the color of the text to dark gray and give it an !important directive so that it overrides the lighter color set with the hover selector. We'll also set the text to bold and make it show a normal cursor rather than a pointer-style cursor.

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.

To deploy the uberlink, we'll need to link up the JavaScript file and initialize it on the body tag.

Link the Uberlink script

Find the closing </head> tag in your page markup and create a new line above it. Insert, on that new line, a link to the Uberlink JavaScript file in your assets folder.

<script type="text/javascript" src="assets/p7uberlink.js"></script>

Initializing the script

The Uberlinks script is programmed to look inside a specific element on your page, find a link that matches the address of the current page, and assign that matching link a special CSS class. For this to happen, we need to tell the browser to run the Uberlinks script. To do that, we'll add an onLoad initializer to the body tag.

Find your opening body tag and add the initializer as follows:

<body onLoad="P7_Uberlink('uberlink','navlist')">

The initializer calls the JavaScript function P7_Uberlink. Inside the parentheses are the two arguments that tell the script which style to use and in which element to look. In this case, the script will assign the uberlink class to any link inside the navlist element that matches the current loaded page. As you might suspect, you are free to use any class name or element you wish, but for this exercise, uberlink and navlist are the class name and the element we are working with.

Note: For those of you who are using an xhtml DOCTYPE, change onLoad to lowercase onload.

browser bugs and workarounds (IE Windows)

If you've followed along, built your own menu, and tested it in MSIE 6, you know that there is a problem: the entire link box is not hot or clickable - only the text is. And if you've tested in MSIE 5.x or 6, there is another problem. There are vertical gaps between each link. We can fix both of these issues quite easily. However, the CSS workarounds will cause problems if not specifically targeted at the browsers that need them. To do so, we'll use IE-PC Conditional Comments to target specific curative CSS rules at IE5x, and IE6x.

The first rule targets IE5x and fixes the "clickable box" issue and the vertical gap as well.

<!--[if IE 5]>
<style>
#navlist a {
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->

The second rule targets browsers less than or equal to (lte) IE6x, which include all versions from 5.0 to 6.99.

<!--[if lte IE 6]>
<style>
#navlist a {height: 1%;}
</style>
<![endif]-->

Place both comment blocks just before the closing </head> tag in your document to ensure it comes after the main style sheet.

Note: You cannot place Conditional Comments inside style sheets, but you can place a link to an external style sheet inside a Conditional comment. You can also deploy a Conditional Comment with a server include. To learn more about Conditional Comments see the MSDN web site.

Your finished style sheet and the appended conditional comments, should look like this:

See Finished Style Sheet and conditional comments

IE7 workarounds?

IE7 requires no workarounds for the Uberlinks menu.

Version 4 browsers

You will, of course, need to use your favorite CSS hiding technique to keep Netscape 4 and IE4 from reading your style sheet.

Dreamweaver Templates

The Uberlinks method works perfectly in Dreamweaver Templates.

That's a wrap!

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