It’s truly remarkable what can be achieved through CSS, especially with navigation menus. Using the immense power of CSS, we’re going to turn this:
Into this:
The HTML code for our CSS menu
That’s it! Quite simple really.
Removing the bullets
First thing we’ll do is remove the bullets, by creating a new CSS rule:
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
The important CSS command is the first one, list-style: none, which says that we don’t want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.
With this new CSS rule our menu now looks like:
Displaying the menu items inline
To get these menu items all on to one line we’ll insert this CSS rule:
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
The float CSS command is the really important one here as that aligns the menu items up against each other. The margin CSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right.
Our CSS navigation menu now looks like:
Now we’re getting there! One word of warning, by using float: left, whatever you place below your CSS navigation menu will display alongside the menu and not below it. To get round this, be sure to assign clear: both to whatever’s next in the HTML document.
Making the boxes
Right, we’ve got the menu items all lined up next to each other, so now let’s make them look good too. Our final CSS rule is:
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
Bit long, eh? Let’s go through it, bit-by-bit. The background CSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn’t specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.
We’ve specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.
IE 5 Up on Mac
You may have noticed the float: left in the above CSS rule. This is there solely for the benefit of IE 5 on Mac – without it, our CSS navigation boxes will stack up on top of each other in this browser. We don’t however want other browsers to use this rule, so we need to cancel it for every browser except IE 5 on Mac:
/* Hide from IE5-Mac */
#nav-menu li a
{
float: none
}
/* End hide */
No Wrapping Please!
The CSS command here, float: none, will cancel out the float: left CSS command because when two CSS commands are specified for the same selector, the second one always takes precedence. This will work for all browsers except IE 5 on Mac, which will be unable to read the second command because of the slashes and stars. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack by Sam Foster.)
There’s just one final CSS rule we need to create, and that’s to assign a width to our CSS menu navigation. This is optional, but if we don’t assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:
#nav-menu
{
width:30em
}
Pretty self-explanatory, really!
The Final Product
Our final CSS code, all in one place is:
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li
{
float: left;
margin: 0 0.15em;
}
#nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
/* Hide from IE5-Mac */
#nav-menu li a
{
float: none
}
/* End hide */
#nav-menu
{
width:30em
}
So, here it is, our CSS navigation menu:
Take this further
Did you notice that when you mouseover the CSS navigation menu items above, they become underlined? You can specify any hover effect for these menu items, including changing the background image. Simply make a copy of the entire #nav-menu li a CSS rule and change #nav-menu li a to #nav-menu li a:hover. Within this new CSS command, make any changes you like – in this example we changed text-decoration: none to text-decoration: underline.
You could even make two more copies of this CSS rule, for #nav-menu li a:visited and #nav-menu li a:active. These rules would be applied to visited and active links respectively within the CSS navigation. You can then change whatever commands you like for these. Play around and see what you can come up with!