Rounded Tab menu through CSS

Tab menus (like above picture) are commonly used in website for the navigation. This tutorial will teach you how to make this tab menu through css.

Step1
Let us prepare an image of single tab. It should be big in width so that it can be use for the large text.

Now slice it into two part ( tab_left.jpg) one is left part which is used a little piece of the image.

second one is remaining part (tab_right.jpg) of the image.

Step 2
We completed step 1 now step 2 where we will write a code in html page for the tab menu (like below)

<ul class=”tabs”>
<li><a href=”page1.html”>Page 1 </a></li>
<li><a href=”page1.html”>Page 2 </a></li>
<li><a href=”page1.html”>Page 3 </a></li>
</ul>

Step3
The most important part of the process is CSS stylesheet. Your CSS code should be like this :
————

ul.tabs{
list-style-type:none;
padding:0px;
margin:0px;
}

ul.tabs li{
background:url(images/tab-active_right.jpg) no-repeat right top;
float:left;
height:32px;
padding:0px;
margin:0px;
margin-left:3px;
color:#990000;
}

ul.tabs li a {
background:url(images/tab-active_left.jpg) no-repeat left top;
height:32px;
padding: 0px 20px;
float:left;
padding-top:5px;
color:#990000;
}

————

You may have a question about how the two background image are arranged to produce the picture of single tab. So that, here we used larger part (tab_right.jpg) is attached to the right edge of the list item element (<li>). And the small one is (tab_left.jpg) is attached to the left edge of the anchor element (<a>) placed on top of the list.

As result you will get a nice looking tab menu with rounded corner. And tab width automatically adjust to the text width.

No Comments Yet

No comments yet.

Comments RSS TrackBack Identifier URI