Creating a Horizontal Navigation Menu with HTML and CSS
March 22, 2011
It’s true: Your navigation items are really a LIST. Bread, Milk, Sugar, Coffee, Home, Contact Us, About, Cheese, Tomatoes, Sitemap. See, it’s a LIST!! And it should be coded and styled like a list. It’s easy.
<ul id="navigation"> <li><a href="#">Home</li> <li><a href="#">About</li> <li><a href="#">Stuff</li> <li><a href="#">Other Stuff</li> <li><a href="#">Contact Us</li> </ul> |
And it looks like THIS. Note how I’ve given the ul an id. I call it ‘navigation’, but you can call it ‘hamster-parade’ or whatever you chose. However, I’ve long since discovered that using practical and meaningful names for classes, IDs, file names, and images is VERY helpful. So let’s stick with ‘navigation’. The reason for this ID here is that it will allow me to apply a specific style to only the navigation list, while other lists within my site can be styled totally different.
But even so our navigation list is a list, most of the time, we don’t want it to look like one. So first, let’s get rid of the bullet:
ul#navigation { list-style: none; } |
And to get our list items to line up horizontally, we add:
ul#navigation li { display: inline; white-space:nowrap; } |
The ‘display: inline;’ line creates the horizontal line. ‘white-space:no-wrap’ prevents our list from wrapping and turning into a 2-line list, which could possible happen when the page is viewed at lower resolutions or the font is increased beyond a certain size in the browser view. And here you go: A Horizontal Navigation List without Bullets. At this point, it’s kind of ugly, but how to dress it up will be a different post.
