Simple Menus With (x)HTML Lists And CSS

When it comes to creating a menu for your site one of the easiest ways is to use a simple unordered list as your (x)HTML structure and then style it using css. With the right styling you can even achieve some creative effects Let’s get right into the code and build a simple menu.

(x)HTML List

The structure of the menu is just an unordered list with links inside each of the list items.


<ul id="list-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>


Nothing really exceptional to this list. You would naturally add real URLs to your pages inside the href attribute. The only thing I added was an id of ‘list-menu’ just so we can refer to the menu later. The code as we have it now will look like:

• Home
• About Us
• Services
• Products
• Contact

Styling The Menu With CSS

The (x)HTML only menu is certainly workable and I’ve used something as simple in sites before. What we’re after here is a little something more so let’s dress it up a little with some css.

One issue you may come across with lists is where that indent in the list comes from. Firefox and IE indent the list using a different css property. In Firefox it’s the padding that indents the list and in IE it’s the margin. The easiest way to get them both in line with each other is to set both margin and padding to 0. From there I like to add back some margin to get the menu where I want. Let’s also turn off the bullets since we won’t be using them here and let’s give the menu a width. We’ll let the height take care of itself.


ul#list-menu {
margin:20px;
padding:0;
list-style:none;
width:150px;
}


For the links we’ll take out the underline and give them a little padding, a text color, and background color. The most important thing we need to add to the links is to get them to work the way we want is display:block. Setting the display property of the links to block will get each to expand to fill their container, in this case the list items, instead of just being the size of just the anchor text.


ul#list-menu li a {
text-decoration:none;
display:block;
padding:5px;
width:140px;
background:#485e49;
color:#eee
}


I’ve set the css to act on ul#list-menu li a. The li isn’t really needed and the css could also have been applied to ul#list-menu a or even just #list-menu a, but I used the longer form to be more specific when it comes to cascading rules. It’s not something that will be important here, but it can be depending on how complex the css for the rest of your page gets.

The two main things to pay attention to with the css above is the display:block which is what will really make the whole structure work. It’s what will make the link fill up the entire list item so anywhere we place our mouse will be a link instead of just the text. It’s easy to test this by taking the display:block out of the code and see how the menu looks. The other thing to pay attention to is the width. The width of the links is a little less than the overall list to account for the 5px padding on the left and right of the link. Adding the width to the links also fixes a problem with IE in the vertical spacing of the links within the list.

As we currently have it coded our menu should now look like the following:

• Home
• About Us
• Services
• Products
• Contact

It’s getting there, but we can still make it look a little nicer and give it some kind of rollover effect.

Final Touches

For a little extra style let’s give the menu and the individual links a border so they stand apart from each other a little more. We’ll do this is by adding a 2px border to the <ul> with the exception of the top which will only be 1px. We’ll then give the links a 1px top border. The 1px less on the overall list gets accounted for with the 1px border of the first link. The rollover effect can be kept simple as well. We’ll just change the color of the anchor text and also the background color. Here’s the new css:


ul#list-menu {
border:solid #668265;
border-width:1px 2px 2px 2px;
}

ul#list-menu li a:hover {
background:#a2b3a1;
color:#000
}


For the menu I’ve used the border shortcut property for the style and color of the border and specified the widths with the border-width property since we want to use different widths. Since the border on the links is only on one side I just used the shortcut. Just as with the link I also used the specific selector when referring to the hover on the link. We now have our final menu which should look like:

Nothing to it. With just a very simple list structure and not so complicated css we have a pretty decent looking menu. With a little more css you could easily style the list more and achieve some interesting effects. For an example take a look at Office Support 911 which is a site I recently designed and developed. The menu on the site adds a couple of images for the handle of the file cabinet and a little javascript to make it all work in IE, but at it’s core it’s nothing more than a styled list.

Complete Menu (x)HTML And CSS

The complete code for our simple menu is:


<ul id="list-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

ul#list-menu li a:hover {
background:#a2b3a1;
color:#000
}


I hope you’ve seen how easy it is to create a simple menu. Lists can also be used to create horizontal navigation and by nesting lists with just a pinch of JavaScript you can create some nice dynamic drop down menus. So the next time you build a menu for a site use an HTML list structure, some css styling, and a little of your own creativity for some nice effects that will be much easier to code than they look.

Subscribe to TheVanBlog |  Email This Post