This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Tuesday, March 18, 2008

Clean Tab Bar Digg-like using CSS

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 tutorial


Tab 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)
- Standard tab (Community, Messages, Contact)
- Hover element (Blog)
Each element has rounded corners and adapts its width to the text conteined inside it.

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:


Take a look a this post for more infos about rounded corners in liquid elements for a better explanation about this topic.

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>

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{
border-bottom:solid 1px #DEDEDE;
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;
}
.tab a span{
background:url(img/tab-round.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}
.tab a:hover{
background:url(img/tab-round.png) right 30px;
display:block;
}
.tab a:hover span{
background:url(img/tab-round.png) left 30px;
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

blog comments powered by Disqus
Anonymous said...

Another great post! Thanks Antonio, you are really the best!

vike said...

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.

Luca said...

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
{
...
}

Antonio said...

@Luca: thanks for your tips!

FreelancerFire said...

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!

Cezary Tomczyk said...

For li I would add display:inline to fix IE Doubled Float-Margin bug.

David said...

Ciao Antonio,

really great and useful tutorial.
I also use the body id for the active tab.
Mille grazie

Ralph said...

Thank you for this tutorial and i use to my own webproject, perhaps ;)

Sujito said...

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!

Nick said...

This is brilliant; just the sort of thing I was looking for! Many thanks.

Anonymous said...

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

Sergio said...

A very useful tutorial.

Thank you very much!

Harpal Singh said...

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.

vicpoke said...

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!!!

Anonymous said...

Harpal you're the man!

ryopi-fansu said...

thanks for this nice tutorial! you make css looks so clean & simple :) thanks to you and harpal

Nos said...

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.

Habib Wali said...

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.

Dawson said...

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

Jonesey said...

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.

Allan Kelly said...

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.

Sandra said...

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.

Anonymous said...

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.

Dust Mason said...

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 :)

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News