Rob Soukup web design - sliding doors tabs

Sliding Door Tabbed Navigation

This is the sliding door tabbed navigation technique from A List Apart.

Home
News
Products
About
Contact

HTML

<div id="tabs">
<ul>
<li><a href="#here">Home</a></li>
<li id="current"><a href="#here">News</a></li>
<li><a href="#here">Products</a></li>
<li><a href="#here">About</a></li>
<li><a href="#here">Contact</a></li>
</ul>
</div>

CSS (Cascading Style Sheets)

#tabs {
float:left;
width:100%;
font-size:93%;
line-height:normal;
margin-left:50px;
}

#tabs ul {
margin:0;
padding:0;
list-style:none;
}

#tabs li {
float:left;
background:url("../../images/tabs.jpg") no-repeat right top;
margin:0;
padding:0;
}

#tabs a {
display:block;
background:url("../../images/tabs_left.jpg") no-repeat left top;
padding:5px 15px 5px 7px;
}

#tabs #current {
background-image:url("../../images/tabs_over.jpg");
}

#tabs #current a {
background-image:url("../../images/tabs_over_left.jpg");
padding-bottom:5px;
}

#tabs a:link {
color:#FFFFFF;
}

#tabs a:visited {
color:yellow;
}

#tabs a:hover {
color: #33FFFF;
}