Here’s how I’ve been implementing horizontal navbars (note: only tested in FF3 and IE7 at this moment):
The problem
We want a navbar that:
- is horizontal
- shows the reader where in the site they are
- indicates where the reader is about to go by changing the style of a hovered–over link
- doesn’t use any unnecessary divs
See a demo of my horizontal navbar.
Horizontal navbar
The code
Our HTML couldn’t be cleaner and simpler—no meaningless divs, just semantic classes for the ul and the selected link:
<ul class="nav">
<li class="current">Home</li>
<li><a href="#">About</a></li>
<li><a href="#">Journal</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
And the CSS:
ul.nav { height: 2em; text-transform: lowercase; font-variant: small-caps; letter-spacing: 0.1em; margin-bottom: 1.5em; font-family: lucida grande, liberation sans serif, sans-serif; background-color: #efefef; color: #333; } ul.nav li { list-style-type: none; float:left;} ul.nav li a { float: left; width: 10em; text-align: center; line-height: 2em; background-color: #efefef; color: #333; text-decoration: none; border-right: 0.0625em solid #333; } ul.nav li a:hover, ul.nav li.current { float: left; width: 10em; text-align: center; line-height: 2em; background-color: #ffd100; color: #333; text-decoration: none; border-right: 0.0625em solid #333; }
You can, of course, play around with the colours and fonts.
How it works
The real magic is in the height and line-height properties: as long as the ul height is the same as the li line-height we can ensure that the borders that separate the nav links match the height of the background bar.
Have a very merry Christmas!