Pure Css Tab Navigation Menu

In this article, I will show you how to crate CSS tab navigation menu without JavaScript. There is no even one line JavaScript code. This css tab navigation menu works with IE9, Firfox 3.6+, Opera 11, Chrome and Safari.




Download | Demo

This is HTML part. We are going to use radio button because radio button is suitable for this.
[html]
<div class="tabGroup">
<input type="radio" name="tabGroup1" id="rad1" checked="checked"/>
<label for="rad1">Tab 1</label>

<input type="radio" name="tabGroup1" id="rad2"/>
<label for="rad2">Tab 2</label>

<input type="radio" name="tabGroup1" id="rad3"/>
<label for="rad3">Tab 3</label>

<br/>

<div class="tab1">Tab 1 content</div>
<div class="tab2">Tab 2 content</div>
<div class="tab3">Tab 3 content</div>
</div>
[/html]

and this is CSS part.

[css]
/* Set the size and font of the tab widget */
.tabGroup {
font-family: ‘Comic Sans MS’,Helvetica,sans-serif;
margin: 0 auto;
background: none repeat scroll 0 0 #F3F1EB;
border: 1px solid #DEDBD1;
padding: 10px;
width: 310px;
height: 300px;
}

/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
position: absolute;
left:-100px;
top:-100px;
}

/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
/* inline-block such that the label can be given dimensions */
display: inline-block;

/* A nice curved border around the tab */
border: 1px solid #DEDBD1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

/* the bottom border is handled by the tab content div */
border-bottom: 0;

/* Padding around tab text */
padding: 5px 10px;

/* Set the background color to default gray (non-selected tab) */
background-color:#ddd;
}

/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
border:1px dashed #DEDBD1;
}

/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
background-color:white;
font-weight: bold;
border-bottom: 1px solid white;
margin-bottom: -1px;
}

/* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
display: none;
border: 1px solid #DEDBD1;
background-color: white;
padding: 10px 10px;
height: 81%;
overflow: auto;
margin-top: -1px;

border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}

/* This matchs tabs displaying to thier associated radio inputs */
#rad1:checked ~ .tab1, #rad2:checked ~ .tab2, #rad3:checked ~ .tab3 {
display: block;
}
[/css]