Do you like Digg comments tabbed bar with sliding doors effect for each tab?
This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image to manage all status for each tab (standard, active, hover). The result is something like this:
Download the source code ready to use in your projects:
Download this tutorialTab bar anatomy
Before illustrating the code, a little explanation about our Tab Bar. How you can see in this image, whe have three main elements:
- Active element (Home)Each element has rounded corners and adapts its width to the text conteined inside it.
- Standard tab (Community, Messages, Contact)
- Hover element (Blog)
Ok, if this is clear how can you do it using CSS and HTML? A good way to implement it is using a <span> element within an <a> element and apply to both elements a background image with rounded corners:
Background image with rounded corners
How I said some row above, we'll use just one background image to manage active, standard, hover tab status. The image is the following:
We'll use position properties for CSS background attribute to change the state of each tab (active, standard, hover) in this way:
- Active, background top position: top
- Standard, background top position: 30px
- Hover, background top position: 60px
HTML Code
HTML code for each tab will be something like this:
<a href="community.html"><span>Community</span></a>
... and in this specific case each tag is a <li> element of an <ul> list:
<li><a href="community.html"><span>Community</span></a>>/li>
How you can see, HTML is a simple list:
<ul class="tab">
<li class="active"><a href="home.html"><span>Home </span></a></li>
<li><a href="community.html"><span>Community </span></a></li>
<li><a href="blog.html"><span>Blog </span></a></li>
<li><a href="messages.html"><span>Messages </span></a></li>
<li><a href="contact.html"><span>Contact </span></a></li>
</ul>
<li class="active"><a href="home.html"><span>Home </span></a></li>
<li><a href="community.html"><span>Community </span></a></li>
<li><a href="blog.html"><span>Blog </span></a></li>
<li><a href="messages.html"><span>Messages </span></a></li>
<li><a href="contact.html"><span>Contact </span></a></li>
</ul>
When you want an element set to active, you have to add the class "active" to the list element (in bold in the previous code).
CSS code
CSS is a little more complex respect HTML code, but no fear is not so difficult to understand:
ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{
li{float:left; margin-right:2px;}
.tab a:link, .tab a:visited{
.tab a span{
.tab a:hover{
.tab a:hover span{
/* -------------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{
.active a span, .active a:hover span{
ul{
border-bottom:solid 1px #DEDEDE;
height:29px;
padding-left:20px;
}height:29px;
padding-left:20px;
li{float:left; margin-right:2px;}
.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}color:#666666;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
.tab a span{
background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}display:block;
height:30px;
margin-right:14px;
padding-left:14px;
.tab a:hover{
background:url(img/tab-round.png) right 30px;
display:block;
}display:block;
.tab a:hover span{
background:url(img/tab-round.png) left 30px;
display:block;
}display:block;
/* -------------------------------- */
/* ACTIVE ELEMENTS */
.active a:link, .active a:visited, .active a:visited, .active a:hover{
background:url(img/tab-round.png) right 0 no-repeat;
}.active a span, .active a:hover span{
background:url(img/tab-round.png) left 0 no-repeat;
}It's all. Ready to use in your projects, if you want only changing the background image to adapt it to your custom layout.
Download this tutorial
I am 
Another great post! Thanks Antonio, you are really the best!
Thanks for tutorial.
I noticed that IE6 don't render this code properly. If width of element with big background image isn't set, IE6 tries to stretch the element to size of the image. If i set width result becomes ugly - text moves from its centered position as expected. I see three workarounds: (1) use two images, short for -a- and long for -span- (element won't be stretched) and (2) use completely graphical menu like at dragoninteractive.com with all states and menu items in one picture (you control the width), and (3) using conditional comments we can send that short background image only to IE6 users.
I prefer using an "idied" body tag for the active tab styling. With this trick you can use the same navigation code in each page, without setting up a specific .active class. For example, in the home page this is the HTML for the home page:
<body id="inHome">
<ul id="navList">
<li id="home">
<a href="index.html">Home</a>
</li>
<li id="blog">...
</li>
</ul>
...
</body>
Then this is the CSS:
#inHome li#home a
{
[CSS for the Active styling]
}
#inBlog li#blog a
{
...
}
@Luca: thanks for your tips!
Nice post Antonio, I love your site and quality content. I made a few modifications of my own and made a post about them on my new site. I added transparency and scalability to my menu and came up with this post.
Keep up the fantastic work!
For li I would add display:inline to fix IE Doubled Float-Margin bug.
Ciao Antonio,
really great and useful tutorial.
I also use the body id for the active tab.
Mille grazie
Thank you for this tutorial and i use to my own webproject, perhaps ;)
Looks awesome on FF, but I am having trouble with IE6.
I am a beginner and don't really get to understand Vike's suggestion, and inline does not work either.
I would appreciate if anyone could provide some additional clarity here. Thanks!
This is brilliant; just the sort of thing I was looking for! Many thanks.
Thanks.
Vike,
how did you clean up the mess ie6 does to this navigation? i tried your methods 1 and 3, and they didn't work. If i set a fixed width for each -li- element, it works, but then again, i want them to have different lengths according to their content...
if you have any solution to this problem, i'd be thankful to hear it.
regards,
chris
A very useful tutorial.
Thank you very much!
For IE6 issue, just give float:left; to a and span, it will solve the issue.
The problem is coming because there is a float:left assigned to li and display:block assigned to a and span. IE6 isn't making child a block by default, if parent has a float.
Hello! It's a nice and useful post, Thanks a lot!
I'm using this tabs for my site, but I found the same problem for IE6, and solved it partially with the float left for span and a elements. But the bottom border is not displayed!! How can I solve it? Please I need it!!!
Harpal you're the man!
thanks for this nice tutorial! you make css looks so clean & simple :) thanks to you and harpal
Hi Antonio,
I love this tutorial, but for some reason it is having some serious issues in IE. Is there any chance you could help me out with it? I sent you an email, but I do not think I got any response.
For IE-6 put float:left in a and span and take out display:block from both. Also under li put float:left. It worked for me.
Great tutorial! But I am having the same issue with IE 6. People are saying change a and span? Can someone please tell me the specific CSS classes and what to add/remove, becuase I can't figure out the problem.
Thanks for your help,
Dawson
I found a quick IE 6 fix, use a table. Just create a column for each tab and place each tab in it's own individual column. But the key is don't set a width to the table so it wraps.
Many thanks Antonio, this is really a great design. And thanks for the comments which alerted me to the IE6 issue! Thanks Harpal for the solution.
To be clear, simply search for display:block; in the CSS and add a line float:left; below each one. This fixes it for IE6.
Cheers, al.
Really another great post. I like your all the tutorial, very simple and very easy to understand. Thank you for sharing these tutorials with us.
And how to make it "bullet-proof" for text resizing? It works for width, but not for height. If text is too big, it leaks out from the tab image or breaks it.
just a note: make sure your background-image for the tabs doesn't have a transparent background, or else the upper-left corners of each tab will go square :)