CSS Overlapping Tabs
Posted in Blog,Tutorials | Dec 13 2009 | 10 Comments
Tabs are great – They’re user-friendly because they’re like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, we’ll have some nicely interactive tabs.
We’re going to be using the “Sliding Doors” technique to make our tabs flexible, if you’ve never heard of the technique, check out the Douglas Bowman’s original article Sliding Doors of CSS over at A List Apart.
Step 1 – Photoshop
Alright, fire up Photoshop, let’s get started! Let’s start making some tabs: I’m not going to go through the step-by-step process of making the tabs in photoshop, because Collis Ta’eed describes the process in This tutorial over at PSDTuts (scroll down to step 34). If you’re feeling lazy, you can download the custom shape here.
To make the active tab, bring one of the tab layers to the top and change the colour.
Now we’re going to have to make a mess of things so we can slice it up properly. As you know, the sliding doors technique requires one small image from one side of the tab, and an extra-long image from the other side. We’re going to do this slightly differently, because we need our tabs to overlap.
We’re going to isolate two tabs and extend one of them to be larger than we need. Next, select the Slice Tool (C) and make one slice of the area where the two tabs overlap, and another of the remainder of the left tab, excluding the edge detail. Then just turn off the background and save for the web as transparent PNGs.
Next, we do the same thing with the active tab and one inactive tab, but this time we need the whole of the active tab, including the edge detail, and the overlap with the tab to its left. Make sure that the right slice is the same size as the smaller slice we made in the previous step. It may be easier to do both steps at once.
Next, hide the background and save the right-hand slice as a transparent PNG, then show the background, and save the left-hand slice as a JPEG.
Next we need some images of non-overlapping tabs to use for the first and last tabs in our navigation menu. We need these for both the active and inactive states. Save these all as transparent PNGs.
So we should have the following images, give them all descriptive names.
Step 2 – XHTML
Start with just a simple unordered list within a containing div.
05 | <title>Overlapping tabstitle> |
06 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
07 | <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> |
10 | <div class="container"> |
12 | <li><a href="#">Homea>li> |
13 | <li><a href="#">Abouta>li> |
14 | <li><a href="#">Portfolioa>li> |
15 | <li><a href="#">Bloga>li> |
16 | <li><a href="#">Contacta>li> |
Step 3 – CSS
In the css file, add a simple reset to simplify things, add a background colour to the body, and a width to the containing div. We’re also going to get rid of the list-style, and add a margin at the top so we can better see what We’re doing.
1 | body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote { |
2 | margin:0px; padding:0px; border:0px; |
5 | body {background: #333333;} |
7 | .container {width: 960px; margin: 0 auto;} |
9 | ul {margin-top: 50px; list-style: none;} |
Next, float the list items into a horizontal line.
Now we can add in our background images. It’s going to look really bad at first, but bear with me, we’ll fix it right away. Lets also add some font styling while we’re at it.
03 | background: url(images/inactive_right.png) no-repeat right; |
07 | background: url(images/inactive_left.png) no-repeat left; |
10 | font-family: "Lucida Grande", helvetica, sans-serif; |
11 | text-decoration: none; |
And we’ll have something like this:
Now, we’re going to add some padding to fix up our tabs. Lets start with the list-items. I’m going to add 12px of padding to the top and bottom, but add however much you need to get the full height of your tabs. Next, add some padding to the right. The amount should be about the width of the inactive_right image.
3 | background: url(images/inactive_right.png) no-repeat right; |
4 | padding: 12px 59px 12px 0; |
Next, add the same bottom and top padding to the anchor tag items.
2 | background: url(images/inactive_left.png) no-repeat left; |
5 | font-family: "Lucida Grande", helvetica, sans-serif; |
7 | padding: 12px 0 12px 0; |
There, that looks much better:
Depending on the design of your tabs, you may want to add a bit of padding to the left and right to make things look right.
The next step is to add the alternative images to the first and last links. I’d like to be able to use the first- and last-child pseudo-classes, but our favourite 12% of web users (IE6 users) wouldn’t see them. So, lets just add classes to the first and last items in our markup.
2 | <li class="first"><a href="#">Homea>li> |
3 | <li><a href="#">Abouta>li> |
4 | <li><a href="#">Portfolioa>li> |
5 | <li><a href="#">Bloga>li> |
6 | <li class="last"><a href="#">Contacta>li> |
And add our alternate background images. We’re also going to have to adjust the padding on the first-item tab.
1 | ul li.first a {background:url(images/first_inactive_left.png) no-repeat left; padding-left: 50px; } |
3 | ul li.last {background: url(images/last_inactive_right.png) no-repeat right;} |
Next we need to add the active states. Since we’re working with a static web page, and our links don’t go anywhere, we’re going to have our active tabs display on hover. Obviously, if you’re using this for your website, you would instead add the active styles to the active tab of each page.
1 | ul li:hover {background:url(images/active_right.png) no-repeat right; } |
3 | ul li:hover a {background:url(images/active_left.png) no-repeat left; } |
To create the effect that the active tab is above the inactive tabs, we need to add a negative margin to the left-hand image so that it overlaps the tab to its left, and then add back the same amount in padding. This part is a bit fiddly, you may have to experiment with the size of the margin. In my case, the margin is 3px wider than the 59px images that make up the right sides of the tabs.
1 | ul li:hover a {background:url(images/active_left.png) no-repeat left; margin-left: -62px; padding-left: 62px; } |
Next we just need to add the appropriate background images for the active states of the first and last tabs. We also need to get rid of the negative margin on the first tab.
1 | ul li.last:hover {background:url(images/last_active_right.png) no-repeat right; } |
3 | ul li.first:hover a {background: url(images/first_active_left.png) no-repeat left; margin-left: 0;} |
And there we have it, some overlapping, interactive tabs!
Nice tutorial
khatrijiya
Hi, Ive been trying this tut for afew days now but cannot get it to work right.
I have inputed all the XHTML and CSS letter perfect but the final result gives me the problem of having the “home” tab jump the whole tab area to the right when you hover over it.
Ive played about with the margins and padding but cannot get it to work.
Any ideas?
Thanks!
Hey sorry for not replying sooner, I’ve been mad busy with school. Anyways, I wrote this tutorial a while ago, and I do remember having this problem when I first started, but I can’t really recall how I solved it… I’ll check it out when I have time. Try using firebug to check you margins and padding, it might be inheriting a rule somewhere.
Thanks for the reply, ill see if I can get it sorted
Nice Tutorial… But where is the Demo… ?
I am facing the problem in active link…
Can anybody please help me..
nice
thnks 4 tutorial
Thanks a lot for this tutorial, worked like a charm. Would have taken me hours or even days to figure this out otherwise.
so glad I could help other people figure this out, I can’t even remember why I needed thsi effect in the first place!
Hi,
Thanks for your tutorial. Can you please say how to set active tab in this?