Making a Horizontal menu

Hi all,

Today I would like to show you guys a very clean way to make a 1 level horizontal menu. Now before we start of I assume that you guys worked with the property 'float' before. If you didn't I recommend you read up on it. A nice way of doing that is reading my post on the photo book layout. Or in the future read my still to write article on float. When you read the stuff below and apply styles in the same order and refresh every-time you applied a style you will learn the most of it.

This is how it will look

• One
• Two
• Three
• Four
• Five

Now lets make it.

First of all we need some html mark up. We will use an unordered list for this. Now you might think but aren't those displayed vertical? Yes they are, that why i use it, after you read this tutorial you can make not only a horizontal but also a vertical menu if you pay attention. :)

Code:

<div id="menu">
            <ul id="hornav">
                <li><a href=""><span>One</span></a></li>
                <li><a href=""><span>Two</span></a></li>
                <li><a href=""><span>Three</span></a></li>
                <li><a href=""><span>Four</span></a></li>
                <li><a href=""><span>Five</span></a></li>
            </ul>
        </div>

Now you may ask yourself why on earth is he putting those extra span elements inside the anchor tags? Well I do that because quite some cool looking menu use an advanced technique named "sliding doors". This technique uses 2 images (or a 1 well targeted sprite) as a background. 1 for the anchor and 1 for the span element. Because they slide over each other, it allows for instance nice round corners in all browsers or other fancy looking stuff.

So we have a nice list with links and spans. Notice also I wrapped it in a <div> and I gave both the <div> and the <ul> an #id. This is of course to target them (that's what css is all about). Now lets style them.

Styling the  <div>
Lets start of with the <div> this div is of no real importance for the menu but it gives a good contrast for it and since we wrap it around the menu its a nice practise to give the #id the name of #menu.

Code:

div#menu{
    width:500px;
    height: 200px;
    margin:0 auto;
    background:#80b3ff;
}

Now what happens here. We give this div a width a height, a nice blue background, and we centre it by using  margin: 0 auto;
This will try to set the top and bottom margin to 0 and the left and right margin to auto. which centres it. Note IE 5 ("what's IE 5 dad?") needs text-align:center; for this.

Styling the <ul>
The <ul> is in fact the container of the menu, an we are going to give it some styling which seems odd at the start but if you follow along closely it will make sense. I added comments in the css.

ul#hornav{
    float:left; /* to let other elements sit next to it instead of pushing them off */
    border-left:1px solid #fff; /* set a border left a-elements will do the rest */
    overflow:hidden; /* if no width or height is given it will shrinkwrap to
                     heigth or with of inner elements */
    list-style: none; /* removes bullets */
    padding:0;  /* if you would have used a reset.css this is done already */
    margin:5px;
}

• We use float left, because it could very well be that we like to add more block elements on that same line for instance a search box or something.
• We use a border of 1 pixels only at the left side. We do this because as you will see the anchor elements will have a border top right and bottom. this way the menu can grow as width as we want without extra headaches.
• We us overflow:hidden; Now this is a little trick, which can only be understood when you play with it (give it a contrasting background if you do). As you see we did not specify a width or a height to the <ul>. Why not? well if this menu is created dynamically we can not know the width. (we can with javascript but why should we if we don't have to). By using oveflow:hidden it will shrink wrap to the width and height of the inner elements (<li> <a> <span>). (a nifty trick!)
• We use list-style:none; otherwise we would see the default bullets.
• We set padding to 0, otherwise the <ul> would have it's normal padding.
• We set margin to 5px. I normally would set this to 0 too, but I want it to give some space, if you look at the menu above that tine space top and right those are those 5 pixels. Now if you read my article on the box model you know why I used margin and not padding.

Styling the <li>

This part is crucial for horizontal menu, so pay attention :)

Code:

#hornav li{
    display:inline; /* make it a horizontal list */
}

Yep that's it, by displaying it in-line it becomes a horizontal list. :)

Styling the <a> (normal state)

Styling this is all about taste, and remembering we applied a left border on the <ul>

Code:

#hornav a{
    color:#04a; /*give the links some color */
    display:block; /*give them body */
    float:left; /* bloack elements start at new lines,
                by using float we undo this but keep the body */
    text-decoration: none; /* remove line under link*/
    font-size: 15px;
    padding: 15px;
    border:1px solid #fff;
    border-left:none; /* ul already has a border left */

}

• After we set a nice contrasting colour we set it to display:block; this will give it some body and even allows to set a width if we wanted to.
• Since it will now behave as a block element, it will start at a new line if we don't do anything about it. Here comes float:left; to the rescue, as you now know float allows to let multiple block elements on  the same line. So that's what we do.
• We use text-decoration:none; to remove the default ugly little underline from the <a>
• Next the font-size 15px and some padding of 15 now if you read my article on the box model you now know what height it has. indeed 45px. 15 + padding top and bottom.
• Now here comes the border trick I told about at the "styling the <ul>" part. We give it a border of 1 pixels and directly after it we say no border to the left. So what happens is that the button now in fact looks like this:

sample



So all those <a> elements just connect nicely to each other like lego bricks and the border from the ul closes the gap at the left.

Styling the <a> (hover state)

Styling the hover state is easy if you are familiar with the hover class.

Code:

#hornav a:hover{

    background:#fff; /* just a nice contrasting background */

    color:#80b3ff; /* a nice complementing text color */

}

The :hover on the a element allows for special styling ones your mouse is over the element. You can apply :hover on anything you like. So if you want a mouse-over effect with just css and no javascript you can do it! There is only one problem, IE 7 and lower don't like this pseudo hover class. it only allows :hover on <a> elements. But there are some great javascript fixes for that.

Ones you did all the above you should have a great looking menu that's is portable, ready for the more advanced sliding doors technique and even has a mouse-over effect without using javascript.

Hope you enjoyed this! wish you happy coding and as allows leave a comment if you found this useful or have requests.

cssfreakie