Free! - CSS navigation menu

It's truly remarkable what can be achieved through CSS, especially with navigation menus. Using the immense power of CSS, we're going to turn this:

      • Services
      • About us
      • Contact us

...into this:

All with just a bit of CSS and this tiny image: Sliver of the background image to be used with the navigation menu (which we've called background.gif). Look very closely and you can see it!

Overview

The HTML code for our CSS menu

<div class="nav-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

That's it! Quite simple really.

Removing the bullets

First thing we'll do is remove the bullets, by creating a new CSS rule:

.nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center
}

The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.

With this new CSS rule our menu now looks like:


(This is a sample image of the actual menu because of CSS restrictions of our CMS)

Needs a bit of work, right?

Displaying the menu items inline

To get these menu items all on to one line we'll insert this CSS rule:

.nav-menu li
{
float: left;
display: block;
margin: 0 2px;
padding: 0;
text-align: center
}

The float CSS command is the really important one here as that aligns the menu items up against each other. The display CSS command is important too as that allows us to specify the width of each CSS menu item; without it, each menu item would only be as wide as the words inside it, no matter what width we specify. The margin CSS command gives each menu item no margin to the top or bottom and a 2px margin to the left and right.

Our CSS navigation menu now looks like:

  • Services
  • About us
  • Contact us

Now we're getting there! One word of warning, by using float: left, whatever you place below your CSS navigation menu will display alongside the menu and not below it. To get round this, be sure to assign <div style="clear: both"> to whatever's next in the HTML document.

Making the boxes

Right, we've got the menu items all lined up next to each other, so now let's make them look good too. Our final CSS rule is:

.nav-menu li a
{
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
width: 130px;
float: left;
display: block;
border: 1px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
margin: 0;
padding: 0;
font-weight: bold;
}

Bit long, eh? Let's go through it, bit-by-bit. The background CSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn't specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.

We've specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.

No wrapping please!

There's just one final CSS rule we need to create, and that's to assign a width to our CSS menu navigation. This is optional, but if we don't assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:

.nav-menu
{
width: 415px
}

Pretty self-explanatory, really!

The finished product

So, here it is, our CSS navigation menu, in all its glory:


(This is a sample image of the actual menu because of CSS restrictions of our CMS)

Did you notice that when you mouseover these CSS menu items they become underlined? You can specify any hover effect for these menu items, including changing the background image. Simply make a copy of the entire #nav-menu li a CSS rule and change #nav-menu li a to #nav-menu li a:hover. Within this new CSS command, make any changes you like - in this example we changed ‘text-decoration: none’ to ‘text-decoration: underline’.

You could even make two more copies of this CSS rule, for #nav-menu li a:visited and #nav-menu li a:active. These rules would be applied to visited and active links respectively within the CSS navigation. You can then change whatever commands you like for these. Play around and see what you can come up with!

This article was written by Trenton Moss, founder of Webcredible. He's extremely good at web accessibility training and knows an awful lot about the Disability Discrimination Act.

Reviews

Be the first to write a review

You must me logged in to write a review.