Each navigation bar uses almost the same HTML but slightly different CSS. The HTML is:
<ul class="vertnav">
<li class="textBrowsersOnly">
<a href="#endOfNav">Skip navigation</a>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>(For a horizontal nav bar we use horiznav instead of vertnav)
Notice that this is semantically correct: that is, each element is used exactly how it is supposed to be used. We have a list of links, so we use an <ul> element to group them. Each item is marked up using a <li> element. There are no additional elements needed.
Notice also the "skip link" at the top. This is for users of non-CSS browsers to be able to skip over long navigation lists easily. We will later use CSS to hide the skip link from CSS browsers.
Now I will explain the CSS.
.vertnav{
list-style: none;
margin: 0;
padding: 0;
width: 10em;
}
.vertnav li{
margin: 0;
border: 1px solid black;
}
.vertnav li a{
display: block;
text-align: center;
color: black;
background-color: #CFC;
}
.vertnav li a:hover{
color: white;
background-color: #080;
}Let's look at the first block of CSS. The list-style: none; rule asks the browser not to display the usual bullet points by the list items. Another thing that most browsers tend to do is indent lists. The margin: 0; rule should over-ride that in IE and Opera. For Mozilla, we add in padding: 0;. The width: 10em; rule sets the width of the block. You may want to set this narrower or wider depending on the length of your text. I recommend setting the value in em units if at all possible.
The next block applies to the <li> children of the list. The margin: 0; is default in most browsers, but Opera puts a small margin between list items, so it is a good idea to specify it explicitly. The border: 1px solid black; rule sets the border width, style and colour, including the lines between the items.
The next block sets the colour, background colour and text alignment (right, left, center) for the links. This is fairly straightforward, I won't bother explaining. The important rule in the block is display: block;. This means that the whole box will be taken up by the link: the whole box will be clickable, the whole box will change colour on hover, etc... IMPORTANT.
The last block simply defines a different background and foreground colour for when the link is hovered over.
I have been informed that there is a bug in Internet Explorer 6 that stops the whole 'button' area being roll-overable (you have to roll over the link text for the highlight to work). This should be fixable by adding height: 100%; width: 100%; to the style for .vertnav li a.
However, in turn this may cause problems with Internet Explorer 5.x, which may wrongly interpret height: 100% as refering to 100% of the page height!
This is clearly an area which I shall have to investigate. I will get back to you with my results.
The horizontal version has very similar CSS:
.horiznav {
list-style: none;
margin: 0;
padding: 0;
background-color: #CFC;
border-bottom: 2px solid black;
border-top: 2px solid black;
}
.horiznav li {
display: inline;
}
.horiznav li a {
padding-left: 2em;
padding-right: 2em;
background-color: #CFC;
color: black;
}
.horiznav li a:hover{
color: white;
background-color: #080;
}You'll notice that the border has been moved to the first block. This ensures that we get uninterrupted lines. If we set the border for the list items or links instead then we get small gaps in the border (the gaps can be removed by setting margins, but it is simpler this way).
The list items have the rule display: inline;. This means that they won't start and end on their own lines.
The left and right padding on the links will put a bit of a gap between them. (We can't set a CSS width rule on inline elements).
Again the colours and background colours are obvious and require no explanation.
Text-based browsers allow users to navigate a page by jumping from link to link. The user might not want to read through a whole list of links to get to your content, so it is polite to put a "skip link" at the beginning of any long list of links (more than say 4.) This can be hidden with CSS so that people using visual browsers will not see it. You'll notice that the HTML above has skip links with the class textBrowsersOnly. We use the following CSS to hide these skip links:
li.textBrowsersOnly{
display: none;
}On navbars, underlined links can look a bit ugly, so to remove the underlines I used:
.vertnav a, .horiznav a {
text-decoration: none;
}Why is this better than a lot of other rollover techniques?
<div> tags. Unordered lists make sense in browsers that don't support CSS, whereas <div> tags are ignored.The menu at the EB-Lite website uses this technique.
Look Ma! No JavaScript! These 'tooltips' use pure CSS 2 and will work in Opera 7+, Netscape 7+ and Mozilla 1.3+. They degrade gracefully in non-CSS browsers, such as Lynx or Dillo. The only browser they don't behave so nicely in is Internet Explorer versions 3 to 6 (which pretend to support CSS, but don't really).
Try out the menus at Netscape DevEdge. These are written mainly in CSS and HTML, but with a little bit of JavaScript to make up for Internet Explorer's poor CSS 2 support.
The DevEdge guys have also written a tutorial about how the menus work, but be prepared to wade through some other details of their website redesign. There are seperate tutorials on the CSS used and the JavaScript side of things.
This has already been done to death in various places, so I'll leave you in Mark Pilgrim's more than capable hands.
Last Modified: Sat 06 Sep 2003.