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

Navigation bar with tabs using CSS and sliding doors effect

My friend William asked to me to design for his project a simple navigation bar with tabs using CSS.

I prepared for him this navbar (with status effects active, hover, link). You can download the source code and reuse it in your projects. If you want, you can change tabs colors simply modifying the image which I used as background for each tab.


I also added a short explanation about how to use PHP URL variables to set a tab "active" when the relative page is loaded. Read more for a complete explanation about this tutorial.

Download source code


Step 1: General structure
Each tab has rounded corners and adapts its width to the text conteined inside it. I use this simple method to implement CSS sliding doors effect:


...a <span> element inside an <a> element. I apply to the both elements a background image with rounded corners. For the image, I used a single background image to manage active, link, hover tab status which includes all these states. The image is the following:



You can change the status a tab simply change position property for the CSS background attribute to change the state of each tab in this way:

hover status:
background:url(img/tab-round.png) right 30px;

link status:
background:url(img/tab-round.png) right 60px;

active status:
background:url(img/tab-round.png) right 0px;



Step 2: HTML Code
I used a list <ul> and a <li> element for each tab and, how I said, a link with a <span> tag inside:

<ul class="tab">
<li class="active"><a href="#news"><span>News</span></a></li>
<li><a href="#upcoming"><span>Upcoming</span></a></li>
<li><a href="#favorites"><span>Favorites</span></a></li>
<li><a href="#messages"><span>Messages</span></a></li>
<li><a href="#account"><span>My Account</span></a>&lt/li>
</ul>

Class property is set to active when is defined a PHP URL variable such as $_GET['var_name']. PHP code to add to each li element is like the following:

<li
<?php
if(isset($_GET['upcoming'])){?>
class=
"active"
<?php } >>
<a href=
"#upcoming">
<span>
Upcoming</span>
</a>
</li>




...if is set an URL variable called "upcoming" set the current tab active assiged the class "active" to the properties of the current <li> element

Step3: CSS Code
CSS code is:

ul, li{border:0; margin:0; padding:0; list-style:none;}
ul{
border-bottom:solid 1px #e9f0f5;
height:29px;
}
li{float:left; margin-right:2px;}

.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#56554e;
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;
color:#e0ded0;
}
.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{
color:#1c4e7e;
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! Download the source code to reuse it in your projects.

If your site has a different color scheme you can change the colors of the image using for example photoshop or gimp.

Download source code

blog comments powered by Disqus
Anonymous said...

Nice! Thanks :)

jclermont said...

Here's an alternate one-liner for detecting the current active tab:

(isset($_GET['upcoming'])) ? 'class="active"' : '';

Note: I couldn't include the actual php tags due to commenting filters, but you get the idea.

Brian N said...

one quick fix for the cursor not always changing to pointer in ie7:

.tab a:link, .tab a:visited{
background:url(img/tab-round.png) right 60px;
color:#56554e;
display:block;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
cursor:pointer;
}

Vin Thomas said...

How come you don't ever post a demo?

I love your stuff, but it would help if there was a demo file without having to download the source.

Thanks!

AceFaced said...

Well done. I didn't think about using PHP for a tabbed display. Good idea. Good use of Sliding doors technique.

Mike said...

I agree with Vin Thomas, a demo would be awesome to see if different tutorials are worth reading...

Antonio said...

Yes guys... I have some problem to publish the demo using Blogger.

hossa said...

Just a question. Couldn't you drop the span tag an set the first background to the li?

john said...

nice work but it doesn't work in IE6....

GuiNess said...

Nice trick! It's a nice way to design rounded backgrounds without taking care of the length of your text!

Wiggler said...

Can someone point to a demo, it would be really helpful to see what this is doing.

Besides that, good blog.

LiFE 2.0 said...

Great work! thank you

sinan said...

Nice! Thanks :)

Amanda said...

Hello Antonio,

I'd love to use this for my blog redesign but as you probably know, Blogger doesn't support PHP :(

So instead I'll try to use this as a basis for a Blogger method using the b:if function. I'll let you know if I can get it working.

I do have an idea for you regarding the demos of your tutorials: have you considered using iframes?

I use these for many of the tools I offer over at Blogger Buster. I create a page which implements PHP and display in the page using an Iframe (which Blogger does support).

It's not ideal but it does work :)

Best wishes and congrats on being popular in Del.icio.us today!

Nikopolidis said...

If you are interested, this is a demo of Antonio's Work:

http://designix.bravehost.com/demo1/index.html

Anonymous said...

demo ?!

kthxbai =P

Fi Ess Bee said...

Of course you could use scripting to define which one is active.

But that sucks.

A much better way is making use of a class on the body tag, or any wrapper, and changing the css for each one if they're actve.

Yes this is more CSS, but it doesn't require you to mess with PHP if you can't.

To quickly explain what I'm talking about-

ul#navigation li#aboutus-nav
{
-- styling and deselected stuff
}
body#aboutuspage li#aboutus-nav
{
-- styling for being selected
}

HTML something like:

<body id="aboutuspage">

. . .

<ul id="navigation">
<li id="home-nav">Home</li>
<li id="aboutus-nav">About Us</li>
<li id="other-nav">Other</li>
</ul>

. . .

</body>


It's a very good way to do different styles on a page simply by using the appropriate selector for different pages. Hiding page elements for instance is very simple.

BeyondRandom said...

Great tutorial! thanks alot!

Anonymous said...

Nice work. It doesn't like IE6, though.

Anonymous said...

Nice work. It doesn't like IE6, though.

x2

Anonymous said...

How would you implement this so that the tabs across the top touched, where the same width AND were always as wide as the content section underneath (which must remain, itself, fluid in width)?

Since the content section is fluid, lets say 100% of the width of its container, you must make the tabs 100% width as well. Additionally you'd need some way of determining the required width of each tab so that, regardless of the number of tabs, it always took up that full 100%. Not sure of the mechanics of implementing something like this. Any ideas?

Skyrocket Labs said...

Hi, Antonio,

Good work! Here's an IE 6 fix, which requires a fixed width for each tab but it does work nicely.

In the #nav li property, add:

text-align: center;

This aligns the text in each tab.

Then, in the .tab a:link and .tab a:visited properties add:

width: 90px;
/*or whatever width you need*/

This is critical, as adding the fixed width aligns the tabs horizontally.

I've tested this in FF2/3, IE6/7 & Safari and it's seamless across the board.

Love your tuts! Keep up the excellent work!

Farid Abdulhadi said...

Nice use of CSS Sprites.

[+_+] said...

better fix [than Skyrocket Labs] to prevent tabs 'blocking up' in IE:

just and only ad
d\isplay: inline-block;
after
display: block;

in codeblocks for .tab a & .tab a span selectors

skyrocketlabs said...

@ [+_+]:
I tried that as well and it worked nicely. Stupid IE6.

Pali Madra said...

Nice tutorial thanks.

gphilip said...

the last ie6 fix is great, and the original tutorial also! thanks a lot!!

Scott said...

Thanks for the great technique! This combines very nicely with Fabtabs for those of us using prototype.js already.

And +1 thanks to +_+ for the concise IE 6 hackFix.

Anonymous said...

is there any way to change the color of the tabs?

Anonymous said...

@[+_+]

This works and fixed it!!.

To get different colored tabs just keep adding more tabs to the one image.

Have been building this at: www.thegolfpages.co.uk

Then assigned different class background colors instead of the image based active element.

Junky said...

ok this works perfect but i cant seem to change the colour of the tabs. can any1 point me in the rite direction? would be really gratefull. thanks

S.G. said...

i have tried to create my own image using this tut and i am finding that the right side overlays the left side image to the point where the left top curve isnt visible. its just a regular box edge.

any ideas? i can swap out the images downloaded with the tutorial its its fine. i made my images the exact same size, except that i have transparent backgrounds so that the tabs are not destined for a single back ground page... is that the issue?

Nina Beena said...

I have the same issue as S.G - the left top corner doesn't show up if the image has transparent corners.

When I change the image to have no transparency, it works... strange huh.

My fix for this is to make the corners coloured instead of transparent - just find the background colour once you've layed out the tabs and sized them up etc properly - there's a good firefox plugin to find the colour you need (colorzilla)

EditorPinoy said...

Nice Tutorial Antonio! ^_^

I also made a tutorial about Navigation Tabs/Links but mine is using CSS Tab Designer. Its really easy. To all visitors and readers try this out:

How to put Navigation Tabs in Blogger using CSS Tab Designer

Thanks! ^_^

Prateek said...

Is there a way to get this in Blogger Sidebar?

Kitty said...

This tutorial is for horizontal direction. is there a way to make a vertical one???

  • 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