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 codeStep 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></li>
</ul><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></li>
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>
<?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;
}
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
Nice! Thanks :)
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.
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;
}
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!
Well done. I didn't think about using PHP for a tabbed display. Good idea. Good use of Sliding doors technique.
I agree with Vin Thomas, a demo would be awesome to see if different tutorials are worth reading...
Yes guys... I have some problem to publish the demo using Blogger.
Just a question. Couldn't you drop the span tag an set the first background to the li?
nice work but it doesn't work in IE6....
Nice trick! It's a nice way to design rounded backgrounds without taking care of the length of your text!
Can someone point to a demo, it would be really helpful to see what this is doing.
Besides that, good blog.
Great work! thank you
Nice! Thanks :)
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!
If you are interested, this is a demo of Antonio's Work:
http://designix.bravehost.com/demo1/index.html
demo ?!
kthxbai =P
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.
Great tutorial! thanks alot!
Nice work. It doesn't like IE6, though.
Nice work. It doesn't like IE6, though.
x2
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?
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!
Nice use of CSS Sprites.
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
@ [+_+]:
I tried that as well and it worked nicely. Stupid IE6.
Nice tutorial thanks.
the last ie6 fix is great, and the original tutorial also! thanks a lot!!
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.
is there any way to change the color of the tabs?
@[+_+]
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.
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
Post a Comment