How To Make A CSS Menu

Linux: Automatically backup your mysql databases daily

How to make a CSS menu

Posted On Jan 26, 2008 at 7:23 pm

1179 Comments

Standards Compliant Menu

A menu is nothing more than a list of links for navigation, so the most ideal way to code your menus are by using a list, styled with CSS. This makes the styling ability very flexible while keeping the content-end of the list completely separate from any styling and in a format that is easy to read when style sheets are not in use or disabled.

First thing we need to do is build the list of links using the unorderd list tag as follows:

<div class="menu">
 <ul>
  <li><a href="url">Link 1</a></li>
  <li><a href="url">Link 2</a></li>
  <li><a href="url">Link 3</a></li>
  <li><a href="url">Link 4</a></li>
  <li><a href="url">Link 5</a></li>
 </ul>
</div>

Next we will explore the basic code structure to turn this into a horizontally laid menu. The following code is CSS

1. Simple Horizontal Menu - Centered


.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
 text-align: center;
}
.menu ul li {
 display: inline;
 padding: 0px 10px;
 margin: 0px;
 list-style: none;
}

This will lay the links out next to each other with a nice spacing between links. Because the li blocks are set to an inline type, you will not be able to specify a height for the menu items. That makes this particular code not an ideal method for menus in which each item much have a background image with specific dimensions. We will get to that later.

2. Horizontal Menu - Basic CSS Styling


.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
 text-align: center;
}
.menu ul li {
 display: inline;
 margin: 0px;
 list-style: none;
 border: 1px solid #c8c8c8;
 background-color: #e8e8e8;
 padding: 1px;
}
.menu a {
 padding: 0px 20px;
 text-decoration: none;
 color: darkblue;
 border: 1px solid white;
}
.menu a:hover {
 background-color: white;
 border: 1px solid #d8d8d8;
 color: black;
}

This example adds a little bit of styling via CSS with basic border, background, and foreground properties.

3. Horizontal Menu with Background Image


.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
 text-align: center;
}
.menu ul li {
 display: block;
 float: left;
 margin: 0px;
 list-style: none;
}
.menu a {
 display: block;
 background: url('button.gif') top left no-repeat;
 width: 99px;
 height: 28px;
 padding: 3px 5px 0px 0px;
 margin: 0px;
 border: 0px;
 color: white;
 text-decoration: none;
 font-size: 12px;
}
.menu a:hover {
 color: black;
}

By setting the display type of block, and using the float left property, we are able to manipuate the height dimesions of the link items which is necessary when doing this sort of styling on menus. There is one unfortunate caveat to doing this thoguh, and that is by using the float left, the links are going to stack to the left of their parent container. This can be troublesome if you want your menu centered.

You can overcome this with margins and/or paddings of parent container(s), but its not fluid so if you add or remove a link, you will need to modify the padding/margins you set in order to realign the menu. I have searched for solutions to this and tried many a strange ideas of my own with no real working hack to overcome this issue. If you happen to know of a solutionthat works on all major browsers AND is w3c valid, please let me know!

4. Simple Vertical Menu

.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
}
.menu ul li {
 display: block;
 padding: 0px 10px;
 margin: 0px;
 list-style: none;
}

The major difference here between the horizontal set is that the li is now being set to a block display type. Pretty boring as is, but you can make some nice looking menus very easily with a few simple css style additions.

5. Horizontal Menu - Simple CSS Styling


.menu {
 width: 150px;
}
.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
}
.menu ul li {
 display: block;
 margin: 0px;
 list-style: none;
}
.menu a {
 display: block;
 color: darkblue;
 text-decoration: none;
 padding: 5px;
 border-bottom: 1px solid #e8e8e8;
}
.menu a:hover {
 background-color: #e8e8e8;
 border-bottom: 1px solid #d8d8d8;
 color: black;
}

Here we have added some spacing, a bottom border, modified the link colors, and added a rollover highlight effect. This makes for a very clean, simple, yet attractive menu.

6. Horizontal Menu with Background Image

.menu {
 width: 150px;
}
.menu ul {
 display: block;
 padding: 0px;
 margin: 0px;
 list-style: none;
}
.menu ul li {
 display: block;
 padding: 0px 10px;
 margin: 0px;
 list-style: none;
}
.menu a {
 display: block;
 background: url('button.gif') top left no-repeat;
 width: 99px;
 height: 28px;
 padding: 3px 0px 0px 0px;
 margin: 0px;
 border: 0px;
 color: white;
 text-decoration: none;
 text-align: center;
 font-size: 12px;
}
.menu a:hover {
 color: black;
}

Click here to see all these menus in action

Scott Klarr Jr