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