CSS Lists as Hierarchical Navigation: Horizontal Menu with Background Image (Buttons)

Jun 19, 2009 | Blog, CSS, Web Design

We will end this CSS Menu Series by learning how to turn this:

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

into this:

buttonmenu

1. Let’s start with the HTML code for our CSS menu:

<div id=”mainmenu”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Support</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

2. Then, we will have to remove the bullets by creating a new CSS rule:

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

3. Next, to get these menu items all on one line, we will insert this CSS rule:

#mainmenu li {
float: left;
margin: 0 0.15em;
}

4. Now that we’ve got the menu items all lined up next to each other, we need to make the buttons. We will be using a background image to create the buttons.

#mainmenu li a {
background: url(background.gif) #FFFFFF
bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}

The Full CSS Code

So, to achieve the menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

<style type=”text/css”>

#mainmenu {
width:30em
}

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

# mainmenu li {
float: left;
margin: 0 0.15em;
}

# mainmenu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 7.5em;
display: block;
border: 0.1em solid #DCDCE9;
color: #8CC919;
text-decoration: none;
text-align: center;
}

</style>

</head>

*NOTE: You can specify any hover effect for these menu items, including changing the background image or the text color. Simply make a copy of the entire #mainmenu li a CSS rule and change the selector to #mainmenu li a:hover

Example, as in our image above,

#mainmenu li a:hover {
color: #333333;
}

Resources

Comments

comments