Horizontal Semantic List-based CSS Navigation

If you’ve read my Vertical Semantic List-based CSS Navigation tutorial you’ll already know that a major part of web standards involves using mark-up (HTML or XHTML) for its intended purpose instead of purely to style pages. Part of this involves using lists to control navigation, because that’s exactly what navigation is — a list of links. I’d recommend reading that tutorial first, or at least the first bit. It’ll explain why and how we use lists.

Let’s take the basic link list straight from that tutorial:

<ul>
<li><a href="me.html">About Me</a></li>
<li><a href="you.html">For You</a></li>
<li><a href="site.html">Site Info</a></li>
<li><a href="links.html">Links</a></li>
</ul>

If we add our navigation id to this:

<ul id="navigation">
[…]
</ul>

..we can begin to customise it with CSS, starting off with the removal of the default list bullets:

#navigation {
   list-style: none;
}

We’ll also want to set the margin and padding to zero. This removes the default left margin from all browsers. (If you want a gap underneath the menu afterwards, this can be set using margin-bottom: #; but it must be placed beneath the zero value margins for the cascade to work.) Our CSS now:

#navigation {
   list-style: none;
   margin: 0; padding: 0;
}

Our default navigation should be looking like this right now:

The next step is getting the navigation in a row. This bit is easy peasy and is done with a simple float, assigned to each list item:

#navigation {
   list-style: none;
   margin: 0; padding: 0;
}
#navigation li {
   float: left;
}

Our navigation will now be running into each other in a row. This is no good — our links need to stand out from one another. They need a bit of colour, and some spacing between each other. Because links are inline elements by default, they need to be turned into a block element with a bit of CSS. Let’s spice things up:

#navigation {
   list-style: none;
   margin: 0; padding: 0;
}
#navigation li {
   float: left;
}
#navigation li a {
   display: block;
   background: yellow;
   width: 150px;
}

Our navigation menu should now look like this:

 

Lastly, we just need to get rid of the default blue link colour, and add something to our hover state so that the users know which link they’re hovering over. You might also like to align the text to the middle of each ‘button’ so that the menu looks more even:

#navigation {
   list-style: none;
   margin: 0; padding: 0;
}
#navigation li {
   float: left;
}
#navigation li a {
   display: block;
   background: yellow;
   width: 150px;
   text-align: center;
   color: red;
   padding: 3px 0;
}
#navigation li a:hover {
   background: red;
   color: yellow;
}

..giving our menu a final look of:

 

Try it out yourself, and customise it to your liking!

Important note: if your horizontal menu is not as wide as your content, you’ll need to add a ‘clearer div’ under the menu to stop your text running into it. This can be achieved simply by adding: <div style="clear: left;">&nbsp;</div> straight under the menu HTML.

Comments

  1. I’d just like to thank the anonymous commenter who gave me the heads up about the styles not applying properly. Had you not been such a dick, and instead left a name & url, I could have credited you. Alas.

  2. tnxxxxxxxxxxxxxxxxxxxx

  3. Heya Jem! I’ve had to use this tutorial yet again (cursed lack of practice over the years) and it’s lovely as usual but just a heads up that the “..giving our menu a final look of:” is not actually showing what the menu looks like. It just looks like an unordered list still. I am using Chrome if this helps?

Speak Your Mind

*