CSS tabs navigation, pure css tabs navigation, tabbed navigation using css

Back to the list of tutorials

This tutorial will explain how to create a tabbed navigation using CSS.
Compatible with all major browsers. See example

To start with we need to create a simple layout with a list.

<li><a href="#">home</a></li>
<li><a href="#" class="active">services</a>

<li><a href="#">web design</a></li>
<li><a href="#">flash design</a></li>
<li><a href="#">content management</a></li>

</ul>

</li>
<li><a href="#">about us</a></li>
<li><a href="#">contact us</a></li>

</ul>

</div>
<div id="Container">

</div>

Now we take care of the main elements of the layout.

html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

#Wrapper {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #D0D2C1;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 765px;
float: left;
border: 1px solid #C0C0C0;
display: block;
}

#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
margin: 0px;
width: auto;
height: auto;
}

Next we will style our main menu container "Navigation"

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}

Now we are going to style our top level list "primary".

ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 658px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 11px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}

ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #D0D2C1;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}

ul#primary a {
background: #e8e9e1;
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
background: #F1F1ED;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
}

Last thing we need to do is to style our second level list which will be our submenu "secondary".

ul#secondary { position: absolute;
margin: 0;
padding: 0;
bottom: -1.6em;
left: 1px;
width: 100%;
}

ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #D0D2C1;
text-decoration: none;
}

ul#secondary li a:hover {
color: #333;
background-color: #D0D2C1;
border-top: none;
border-right: 1px dotted #c0c0c0;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}

ul#secondary li a:active {
color: #000;
background-color: #D0D2C1;
}

ul#secondary li:last-child a {
border: none;
}

And that’s all done!
Written by Web Design Tutorials – Sebastian Sulinski

CSS tabs navigation

Tabbed navigation using pure css