Okay, so there are hundreds. No, thousands. Okay, there are most likely millions of CSS menus already out there, but I thought I’d go ahead and throw another into the WWW bucket.

It’s a little different to the usual take (at least, I like to think so) but best of all, it’s dead easy, it’s quick, and it’s oh so simple! So, you ready?

View Demo | Download ZIP

Right. Let’s get started. First things first let’s build the foundations of a solid CSS menu; a good old unordered list.

<ul>
<li><a href="/"><span>Home</span></a></li>
<li><a href="/bananas/"><span>Bananas</span></a></li>
<li><a href="/monkeys/"><span>Monkeys</span></a></li>
<li><a href="/mangroves/"><span>Mangroves</span></a></li>
<li><a href="/amazon/"><span>Amazon</span></a></li>
</ul>

Oi! What’s that <span> doing there!? Hang in there, all will be revealed…

* {
margin: 0;
padding: 0;
}
#menu {
padding: 20px; /*Allow for movement of anchors within element*/
padding-bottom: 0;
list-style : none;
}
#menu li {
display : inline; /*Horizontal list*/
}


Now we have the basics of what we’re about to achieve. The * (asterisks) is a wildcard for all tags, and the declaration helps keep consistency amongst various browsers (check out universal CSS settings for more details)

Now we’re going to style our anchors

#menu li a {
float: left; /*Set to right or left depending on your requirements*/
background : #527dc5 url('cornerLeft.gif'); /*Left corner image*/
text-decoration : none;
margin-right: 3px; /*Spacing between anchor tabs*/
padding-left: 20px;
}
#menu a span {
display : block;
background : url('cornerRight.gif') no-repeat right top; /*Right corner image*/
padding: /*Top*/5px /*Right*/20px /*Bottom*/7px /*Left*/0;
}

See how that <span> came into play? We’re styling our menu with rounded corners, using small images to mask the background colour already set. These images will need to be the same colour as your page background, but it then means you can change the menu colour in seconds - just edit the HEX codes and your done! (you’ll need to download the ZIP to get the images)
To visualise the <a><span> padding layout, take a look at the diagram. The blue represents the <span>, the black <a>. The pink represents the natural text of the anchor. The orange simulates the corner images.

Now lets get to the good stuff.


#menu a:hover, #menu .current a:hover {
position: relative;
top:-10px; /*Shift anchor upwards*/
padding-left: 30px;
margin-left: -10px; /*Negative margins stop neighbours shifting too*/
margin-right: -7px;
}
#menu a:hover span, #menu .current a:hover span {
padding: 8px 30px 14px 0; /*Extra bottom padding pushes anchor back down in-line with neighbours*/
}

This is where the magic happens. The first two lines instruct the anchor to shift 10px upwards (hence the negative value). Next we increase the anchor’s left padding to enlarge the actual size of the ‘tab’. We also add the same amount of padding to the right, this time on the span tag. This keeps the illusion of the text remaining centred, and ensures the tab expands out evenly.

The negative left and right margins compensate for this extra padding, preventing the neighbour anchors from skooching away (’shifting’ for the well educated out there).

The right margin is 3px less than the left, since the anchors (as you might remember from earlier) already have a positive right margin of 3px.

The <span> declaration also adds additional bottom padding. In actual fact, I’ve increased the top padding on hover, so that the text doesn’t shift up as much as the entire tab.

So long as the top and bottom padding on hover = the top and bottom padding without hover plus the shift upwards. This means when you do hover, the bottom of the tab stays in-line with it’s neighbours, rather than ‘jumping’ upwards (which can lead to some nasty flickers too).

Finally, if you’re up to scratch with dynamic menus, you can plop in a ‘class=current’ on the corresponding <li> to indicate the page your user is currently on.

Categorised under: CSS, Navigation, Tips & Tutorials, Websites by Alex S