Navigation menu
« Previous: Fixed width layout | Next: Conclusion »
With a little CSS we can improve the appearance of the navigation menu from the boring unordered list. Start by removing the bullet points - this is done by setting list-style: none to the list itself. Then apply display: block and padding to the links to make the whole line clickable (not just the text). Also remove any default margins and padding from the list and list items:
#navigation ul, #navigation li {
list-style: none;
margin: 0;
padding: 0;
}
#navigation a {
display: block;
padding: 10px;
text-decoration: none;
}
I've used text-decoration: none here to get rid of the default underline on the links. While we're at it, we could also set a hover state so that the text and/or background changes when the user hovers over the link.
#navigation a:hover {
background: #ea6300;
color: #fff;
}
Alas, if you view this page in IE6, you'll find that it has added an extra margin to the links, and display: block isn't working properly. To fix this, we will unfortunately need to add a hack to the code to fix it for IE:
* html #navigation a { height: 1%; }
What’s going on here? Well, the * html at the beginning of the selector causes it to be only picked up by IE version 6 and earlier. The value of the height given here is not important (it’s given a small value because IE will ignore this height if it’s smaller than the element’s content), but simply the fact of specifying a height makes IE display the element properly. You can read this article on having layout if you really want to know the grisly details of IE’s bizarre rendering foibles.
Now we have a nicely laid-out page including a navigation menu. Using this basic set of style rules, it is possible to create all kinds of designs by applying different background images to the different elements.
Variation: horizontal navigation menu
Horizontal navigation menus are very popular, and can be effective providing you have few enough links that they can all fit onto one line. Luckily we can change the menu we’ve just created from vertical to horizontal with only a few changes to the CSS.
Firstly, apply display: inline to the list items so that they can display side by side; apply float: left to the links (otherwise display: block would shift each link onto a new line); finally, change the width of the #navigation div to 100% and shift it up slightly to prevent it from overlapping the content:
#navigation ul, #navigation li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
#navigation a {
display: block;
padding: 10px;
float: left;
}
#navigation {
position: absolute;
top: 100px;
left: 0;
width: 100%;
}
I'll also add a background colour to the navigation menu to create a strip that spans the width of the page, and set its links to appear in white - just for legibility:
#masthead, #navigation, #navigation a, #footer, #footer a {
background: #3954A1;
color: #fff;
}
Here's the same page, but with a horizontal navigation menu.