Rounded Tab menu through CSS


menu.jpg

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.

tab.jpg

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

tab_left.jpg

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

tab_right.jpg

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.

Advertisements

About ashoksuthar

I am ashok suthar a web & graphic designer from Mumbai, India specializing in the user interface design. I like to build a clean, appealing and functional interfaces designs which is based on latest web standards. I love designing and it is my passion. Currently working with GMI-Idhasoft Company in Mumbai.

One response to “Rounded Tab menu through CSS”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: