Creating The Menu
Start by creating two images for the mouse out and mouse over states. Make each image 300 pixels by 50 pixels in size and save the images in the site's "assets" folder. The images are intentionally oversized to make sure that the background will render without tiling and the rectangular bullet will always be vertically centered if a user resizes the text. Here are the images:
This is the mouse out image (l1_down.jpg):
This is the mouse over image (l1_over.jpg):
Next, you need to add the necessary rules to your style sheet.
1. Remove the bullets and indent from the unordered list:
#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-size: .9em;
}
2. Close up the space between list items:
#navlist li {
margin: 0;
}
3. Set the link styles:
#navlist a {
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%;
}
4. Set the pseudo anchor classes (link, visited, hover, and active). The hover/active class sets a new background image (simulating a JavaScript swap image) and changes the text color:
#navlist a:link, #navlist a:visited {
color: #000000;
text-decoration: none;
}
#navlist a:hover, #navlist a:active {
background-color: #9F6F9F;
background-image: url(assets/l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: Red;
}
5. Finally, the "uberlink" which provides the ability to mark the link that is associated with the current page:
#navlist a:hover, #navlist a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #9F6F9F;
background-image: url(assets/l1_over.jpg);
background-repeat: no-repeat;
background-position: 0% 50%;
color: Red;
}
That completes the style sheet rules, but now we need to add the menu to our HTML pages.
1. A couple of conditional comments are necessary to fix problems with the Windows version of Internet Explorer. These conditional comments should be placed just before the closing </head> tag.
The first conditional comment targets IE5+ and fixes the "clickable box" issue and the vertical gap as well:
<!--[if IE 5]>
<style>
#navlist a {
height: 1em;
float: left;
clear: both;
width: 100%;
}
</style>
<![endif]-->
The second conditional comment targets IE6+ and fixes the link box so that the entire box is "clickable":
<!--[if IE 6]>
<style>
#navlist a {height: 1em;}
</style>
<![endif]-->
2. Now we need to add the menu to the page. Place your unordered list of links in the "navlist" container. If you want to use the "uberlink" feature, you need to assign its ID to the <li> tag of the current page. For this example, we'll assign it to Page One:
<div id="navlist">
<ul>
<li id="uberlink"><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>
Personally, I don't worry about visitors who might be using IE4 or Netscape 4; however, if that's a concern for you, you will need to use your favorite CSS hiding technique to keep Netscape 4 and IE4 from reading the style sheet.
That's all, Folks.