Simple tabbed interface using CSS

This post explains how to implement, in the simpler way (using only CSS and HTML), a tabbed interface without add javascript function to show/hide layers.

Download this tutorial

The result is something like this:

How you can see in the previous picture, we have four tabs and when an user clicks over a tab, the layer below the tab-bar displays a new content, related to the clicked tab. For example if you click over About tag, it will display the following content:



Step 1: HTML code
HTML code is very simple: we have a top bar (<div id="bar">) with some tabs, and a main layer which contains all other layers (hidden) with the content related to each tag:

<div id="bar">
<a href="#tab1">Home</a>
<a href="#tab2">About</a>
<a href="#tab3">Contact</a>
<a href="#tab4">Credits</a>
</div>

<div id="container">
<div class="main">
<div id="tab1">First tab element (HOME)...</div>
<div id="tab2">... the second tab element (ABOUT)... </div>
<div id="tab3">... third tab element (CONTACT)... </div>
<div id="tab4">... fourth tag element (CREDITS) </div>
</div>
</div>

Step 2: CSS code
This is the css code which use target pseudo class to show/hide content layers:

/* Tab Bar */
#bar a{padding:4px 6px; background:#E0E9FE; text-decoration:none; font-weight:bold;}
#bar a:hover{color:#003366;}
/* Content Layers */
#container{background:#E0E9FE; padding:10px;}
div.main div {display: none}
div.main div:target {display: block}

For other infos about target pseudo class, take a look here.

Download this tutorial