Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same.

Note: Support for IE7 & 8 is there but limited in that the functionality works perfectly but some of the overlay styles aren’t treated properly. If not for the wonderful and awesome CSSPIE and Dean Edwards fix, there would be no support for any version other than IE9.

Ok, now that that’s out of the way, I think it’s time we got started!

The Video Tutorial

We’re offering this tutorial in two different formats: A video as well as a full written tutorial below. Follow along with whichever method of learning you prefer (or both!):

The Written Tutorial

The step by step written tutorial is below. Be sure to grab the full downloadable source as well!

Step 1 Creating the Markup

The Head

For our first bit of markup, we’re going to create our head using HTML5 doctype, inserting our stylesheets and telling IE 7 & 8 that’s it’s ok to use CSS3.

Building the Containers

After you’ve added the head, in-between the body tags we need to create some containers for the tabbed navigation. Let’s break it down…

As you can see, the first container is id=”container”. This is used to create a full width of the tabbed navigation and to position it however you like.

Last is the class=”tab-container” which is the wrapper for the actual tabs themselves as well as it helps contain the content block. This is a very important class and there’s no need to edit it, although I’ll explain the styling later on in this tutorial.

Tabs will go here

“Last is the class=”tab-container”. This is a very important class and there’s no need to edit it”

Creating your first Tab

The last markup we’ll want to write is for our actual tabs and the content inside them.

First of all we want to create a div with an id so that we can know which content to show when clicking on the corresponding tab. That looks like this…

//Next markup will go here

Then we will create the tab for that content id and tell it to show the div with an id of c1 by using a hash with c1 after it in the link. So now your markup should look like this…

		First 
        //Next Markup will go here

Now let’s create a place to put our content. To do this we’ll simply create a div with a class of .tab-content and insert some dummy text, making your markup now look like this…

		First 
  
This is the first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. 

Let’s Finish the Markup

Just add the following below your first tab (ie: c1)

And that’s it. Very little markup for an awesome tabbed navigation. Here’s the rest of the tabs which all follow suit with the markup you just created! Just add the following below your first tab (ie: c1)…

Note: The last tab you add will always be a hidden tab and the content will show up first so make it something like an introduction.

		Second 
 
Add as many tabs as you like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.



		Third 
 
5 Preset Styles & Color Themes

Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. 



		Fourth 
 
NO Javascript!  NO Images!

Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.

Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat.



 
2 Tab Types - Regular and Newsreel

If you have an opening tab like this, it should always be last in the list of tabs otherwise it won't show first when the page loads.

Text sometimes overlaps with hidden tabs in IE7 & 8

Your tabbed navigation should look something like this. Looks nice in it’s basic form but let’s add some styling and get this baby working!

Step 2 Digging into some CSS

Now that we have the markup all taken care of, you’re feeling like a winner right about now! Let’s take it one step further and build up that confidence by applying some awesome CSS to the markup you’ve just created… then you’ll really have something to brag about!

Global Tags

Ok so for the purposes of this tutorial, we’re using a standalone tabbed navigation, so let’s add some global styles such as for the body, p tags, heading, etc.

When implementing the tabs, you may already have these styles in your stylesheet. In that case you can either delete these styles or taget the .tab-container to create some tab specific styling so not to overwrite your websites own styles.

body {
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	color:#E7E7E7;
}

p, .tab-content li, h1, h2, h3{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

a{
	text-decoration:none;
	color:#EFD24A;
}

a:hover{
	color:#AF9B41;
}

.tab-container h3{ /* Effects only the h3 headings inside the tabs */
	font-size:147%;
	color:#EFDFB3;
}

Styling the Containers

Now we are going to style our two containers. For this tutorial we are going to center that main container using margin: 0 auto, give it a width of 480px and push it down from the top about 4%.

#container{ /* Use this to position the entire tab module */
	margin:0 auto;
	width:480px;
	margin-top:4%;
}

For the .tab-container, it is important to add a position of relative for each tab content block to overlap each other correctly in a nice and contained space. We want our width match the width of our main container 100% and a z-index of 0 which will help keep IE from showing the text of the content block behind the current one.

.tab-container {
	position: relative;
	width: 100%;
	z-index:0;
}

At this point you should have a working tabbed navigation. It doesn’t look pretty yet but hey… it’s working! My apologies if it’s hard to see.

Styling the Tabs and their Content

Ok, so since we have working tabs, the first think we want to do is line them up horizontally. To do that we’ll simply add a display:inline to the first div of each tab.

.tab-container > div {
	display: inline;
}

So now we need to add some default styles to the tabs themselves. We’re going to add a postition of relative which is important for IE. We’ll also put a display of inline-block so to align them properly with the tab content. By putting a margin of 2px, we can add some space around each tab to make it cleaner. We’re also going to add a gradient background for each browser along with a border radius and box shadow for some extra awesomeness! Since we are using CSSPIE again for IE 7 & 8, there is no need for nasty filters in the gradients.

.tab-container > div > a {
	position: relative !important; /* Keeps the tabs in line with each other */
	text-decoration: none;
	color: #D7D7D7;
	display: inline-block;
	padding: 4px 14px;
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	margin:2px;
	background: #4C4648; /* old browsers */
	background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* firefox */
	background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* future browsers */
	-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E)); /* webkit */
	border:dashed 2px #CFA840;
	padding: 4px 14px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 0px;
	border-radius: 3px;
    text-shadow: 0 -1px 0 #000000;
	-moz-box-shadow: 0 4px 10px -5px #000000;
	box-shadow: 0 4px 10px -5px #000000;
	-webkit-box-shadow: 0 4px 10px -5px #000000;
}

Next on the list, we want to let the user know which tab they’re on. So to do that we will use the target selector and use Dean Edwards IE9.js to make IE 7 & 8 recognize it.

So .tab-container > div:target > says that when the first div (ie: div id=”c1″, etc) is selected or is the target then we will change what the button (ie: a) inside of that div will look like.

.tab-container > div:target > a {
    background: none repeat scroll 0 0 #948a81;
    text-shadow: 0 1px 0 #4C4648;
}

Now that we’ve styled the tab buttons, let’s go ahead and add some character to the content area.

What we’re going to do here is target the second div within the .tab-container which is div class=”tab-content” and give it a min-height of 250px which is important so that all the content divs behind the target div have no overlap. So since we have the content with the correct height, we still need to hide the inactive content div behind the target one, and to do that we’ll simply add a z-index of -2. Also we want IE 7 & 8 to play nice so we’ll add a position of absolute. So that’s the important stuff and the rest of the code is there to add some extra styling and give us a nice darkwash jean look.

.tab-container > div > div { /* This is the container which holds the tab content */
	background: #4C4648; /* old browsers */
	background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* firefox */
	background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* future browsers */
	-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* pie for ie */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E)); /* webkit */
	-moz-box-shadow: 0 0 12px 1px #000000 inset;
	-webkit-box-shadow: 0 0 12px 1px #000000 inset;
	box-shadow: 0 0 12px 1px #000000 inset;
	z-index: -2;
	top: 50px;
	padding: 20px;
	border:solid 6px #4C4648;
	outline: 2px dashed #CFA840;
	outline-offset: -8px; /*Delete if you don't want an offset*/
	min-height:250px; /* Change this value if you need more or less content space */
	position:absolute; /* Fixes IE 7 & 8 */
}

After the initial content divs have been styled, we’ll want to bring the target one to the front. To do this we simply use the target selector with a z-index of 3 and make it important.

.tab-container > div:target > div {
	position: absolute;
	z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */
}

Last thing we’ll do is add some padding to the content and some default styling if you’d like to add an image inside your tabs.

On a side note, don’t forget to import your reset.css file at the top of the stylesheet, we need this to override browser defaults.

div.tab-content{ /* Styles the inner content of the tabs */
	padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}

.tab-content img{
	margin:0 auto;
	display:block;
	padding-bottom: 20px;
    padding-top: 10px;
}

/******  This imports other stylesheets so you don't have to call them in an html file *****/
@import url('../../reset.css');

After all that has been finished, you should end up with something like the following image. If yours doesn’t look the same or similar then either you missed something or decided to go with your own styling, just go back and recheck your work, I’m sure it’s only something minor.

One More Thing…

We want to tell IE7 & 8 that it’s ok to use box shadows, rounded corners, etc. So to that we simply add the elements that are in our stylesheet with CSS3 features to our ie.css file, then we use the behavior for CSSPIE like so…

.tab-container > div > div, .tab-container > div > a{behavior: url(../styles/csspie/PIE.htc);}

Great Job… You’re Finished!

If you’ve gotten this far, then that means your all done so… congratulations! Hopefully you enjoyed this tutorial as much as I enjoyed writing it. It’s always a pleasure teaching you guys new tips and tricks you may not already know. With that said, good work, be patient and keep soaking up as much knowledge as you can and before you know it you’ll be a master at whatever you do!

Leave your comments and questions below ;)