CSS Lists as Hierarchical Navigation: Horizontal Menu

May 12, 2009 05:09:50

Posted By Doteasy

horizontal_menu

This menu:

items aligned horizontally
items are displayed as blocks
block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
list-style: none;
}

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 750px;
    font-family: Tahoma;
    }

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
    display: block;
    width: 120px;
    float: left;
    margin-left: 2px;
    border: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
        display:block;
        padding:3px;
        text-decoration:none;
        background-color:#333333;
        color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
        background-color:#8CC919;
        color:#FFFFFF;
         }

The Full CSS Code

So, to achieve the horizontal 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 <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                 margin:10px;
                 width:750px;
                 font-family: Tahoma;
                 }

            #mainmenu li {
                display:block;
                width:120px;
                float:left;
                margin-left:2px;
                border:1px solid #333333;
                 }

             #mainmenu a {
                display:block;
                padding:3px;
                text-decoration:none;
                background-color:#333333;
                color:#FFFFFF;
                 }

             #mainmenu a:hover {
                background-color:#8CC919;
                color:#FFFFFF;
                 }
        </style>
</head>

Resources:

Doteasy Blog - CSS Lists as Hierarchical Navigation
Website-Tutorial.net - CSS Positioning
Listamatic - one list many options
A List Apart - Suckerfish Dropdowns
Matthew James Taylor - Beautifully Horizontally Centered Menus
PixoPoint - Multi-level Navigation CSS Generator

>> Stay tuned as next time, we will be creating a vertical menu.

Permalink Comments (1) Email to Friend

Categories: Web Design, CSS

1 Comment(s):

Performans event said...

thanks

September 22, 2009 10:37:18