CSS-based 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:
- uses a graphical background,
- tab width automatically adjusts to text width,
- handles text resizing elegantly,
- no meaningless HTML elements required.
Graphics
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).
tab.png
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.
tab_left.png
tab_right.png
HTML Code
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.
-
li'smargin-rightdetermines the spacing between tabs, -
a'spaddingsets the padding inside a single tab, -
a's text-related CSS properties (text-decoration,color, etc.) determine the appearance of text in tabs.
Demo
Oh, and don't forget to see the demo.