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

June 19, 2009 04:41:31

Posted By Doteasy

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

Permalink Comments (1) Email to Friend

Categories: Web Design, CSS

1 Comment(s):

Web Design London said...

Amazing post. This is really a useful article.I think the readers will definitely get more help from this post.Thank you so much.

September 21, 2009 03:29:06