Jefim Borissov Житие мое

How-To: Create a horizontal menu

This is a tutorial on how to create a fully costomizable horizontal menu. Why another menu how-to? Well, mostly because there are situations when there are no suitable google results (based on my experience) and you have to come up with something yourself.

These are the features we will try to get into our menu:

1. It will be horizontal
2. It will have splitters (made with images)
3. It will have active class for rollover / selected item (background change)
4. Menu items will be of different size

This code works for Internet Explorer 6+, Firefox 2.0+, Opera 9+, Safari (at least on Safari 4 - tested on Windows version of it).

Here is a mockup that we have:

Menu mockup

NB! If you just want to see how to do it - go here for the demo / full code.

Ok, first, the HTML you need for this thing to happen:

<ul id="menu">
 <li><a href="#">Menu item</a></li>
 <li class="active"><a href="#">Longer item</a></li>
 <li><a href="#">Short</a></li>
 <li><a href="#">Finally</a></li>
</ul>

This is the needed thing. One more thing to add - if you lack one element for background (if <li> and <a> are already having backgrounds and you need another one) - just wrap <a> with a <span>.

The CSS code for the menu:

html, body {
    font-family: "Trebuchet MS";
    font-size: 16px;
}
a       { text-decoration: none; color: #ffffff; }
a:hover { text-decoration: underline; }

#menu {
    margin:0;
    padding:0 12px;
    list-style-type: none;

    background: url(menu-bg.png) no-repeat;
    height:33px;
}
#menu li {
    float: left;
    display: block;
    margin-top:1px;
    background: url(menu-item-bg.png) no-repeat top right;
}
#menu li a {
    display: block;
    padding:4px 12px 4px 10px;
}
#menu li.active {
    background: url(menu-item-active-bg.png) no-repeat;
}
#menu li.active a {
    background:
        url(menu-item-active-bg-right.png)
        no-repeat top right;
}

Some explanations: paddings and heights are just to make this thing look better a bit. The most important things are float, display and background aligns! If you want to create the menu yourself - just change the images and change the paddings / heights to correspond.

Now, the list images we will have to use:

Menu background

Menu item background

Active menu item background

Right-handed chunk

Of course you may want it to be a rollover effect. This is very easy to accomplish by using JavaScript. I will use jQuery for this but you can pretty much use any framework or just plain JavaScript to do that. The code for the rollover effect in jQuery is as follows:

    $(document).ready(function () {
       $('#menu li').mouseenter(function ()
           { $(this).addClass('active'); });
       $('#menu li').mouseleave(function ()
           { $(this).removeClass('active'); });
    });

Finally, the whole stuff compiled together