CSS-based Tabbed Menu

by Michal Wojciechowski <odyniec - at - odyniec - dot - net>

A tabbed menu

Tabbed menus (like the one pictured above) are a commonly used method of navigation within websites. This article presents a simple method of implementing a CSS-based tabbed menu.

The basic features of this method are as follows:


First, let us prepare an image of a single tab. It should be relatively big, so that large text can fit in it (this is important for proper handling of resizing).

A single tab

We then slice it into two parts, the left one being just a little piece of the image (make sure it contains the whole rounded corner). The right one is the remaining part of the image.

Left side of tab

Right side of tab


We're done with the graphics. Now, let's put together some HTML code for the tabbed menu. As you can see below, it's just an unordered list containing anchors:

<ul class="tabs"> <li><a href="page1.html">One</a></li> <li><a href="page2.html">Two</a></li> <li><a href="page3.html">Three</a></li> </ul>

CSS Stylesheet

The most interesting part of the process is the CSS stylesheet that we're going to use to give the menu its appearance:

ul.tabs { list-style-type: none; padding: 0; margin: 0; } ul.tabs li { float: left; padding: 0; margin: 0; padding-top: 0; background: url(tab_right.png) no-repeat right top; margin-right: 1px; } ul.tabs li a { display: block; padding: 0px 10px; color: #fff; text-decoration: none; background: url(tab_left.png) no-repeat left top; } ul.tabs li a:hover { color: #ff0; }

Most of the CSS rules are there to maintain the proper layout of the menu — in other words, to transform the standard vertical, bulleted unordered list into a horizontal set of tabs.

What is worth noting is how the two background images are arranged to produce the picture of a single tab. The larger part (tab_right.png) is attached to the right edge of the list item element (<li>). The smaller one (tab_left.png) is attached to the left edge of the anchor element (<a>) placed on top of the list item. As a result, both rounded corners are visible and we get a nicely looking tab.

That's all. You may want to modify a few CSS rules to make the menu look as you like.


Oh, and don't forget to see the demo.