Navigation CSS Tabs
When it comes to parting the contents of your website into categories to ease navigation, one of the most widely used design patterns are Navigation Tabs.
While in the past, it was the norm to show tabs as a set of images or even as columns in a table. However, with the emergence of CSS several years ago, it became the norm to combine HTML and CSS to create tabbed navigation bars without the use of <img> or <table> tags.
The contents of a navigation bar with tabs is basically a list. This is why we want to use the HTML elements for lists to write up our list items of tabs in the navigation bar. Then later, we will use CSS to style the list into the tabs we want to see.
<div id="header">
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#" class="current">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
</div>
Without any CSS styling, this will produce this:
The first thing we want to do is to style the list into being shown horizontally and not vertically. We also want to get rid of the standard margin and paddings built in from the browser into the standard <ul> and <li> HTML elements. We therefore add the following CSS classes:
ul.tabs {
margin: 0;
padding: 0;
list-style: none;
}
ul.tabs li {
margin: 0;
padding: 0;
float: left;
}
The float attribute in the ul.tabs li class puts the <li> (list item) elements on a straight horizontal line (instead of being presented vertically). Setting list-style: none removes the bullets from each of the list items.
With the newly introduced CSS classes, our list will look like this:
This does not look like much right now, but rest assured – it will later.
As we want the entire tab to be clickable, we do not want to modify the CSS class of the <li> more than we have done now. We are on the other hand interested in defining the class for the link tag (<a>). We will add the following class:
ul.tabs a {
display: block;
margin: 0 2px 0 2px;
padding: 3px 10px;
border: 1px solid #aaa;
}
The <a> tag is now shown as a block, making sure that also its padding will be clickable and that it will be placed well in the left floated <li>. We then add a border around each tab item.
This will produce:
In order to get the tabbed feeling into the style, we will add the following:
#header {
width: 100%;
float: left;
border-bottom: 1px solid #aaa;
}
ul.tabs a {
display: block;
margin: 0 2px 0 2px;
padding: 3px 10px;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
text-decoration: none;
background: #ddd;
color: #888;
}
ul.tabs a:hover {
background: white;
}
The #header corresponds with the <div id="header"></div> first mentioned. It has now gotten the width of 100%, letting the tabs line continue all across the page and also a bottom border, that will be shared by all tab elements. This means that we might as well delete the bottom border of each tab element.
The <a> element is further styled by removing the text-underline, setting the background color of the tag to #ddd and its text color to #888. Further, a hover class is added to the tab element (<a>) – changing the background color of each tab as the user has his mouse cursor over the element.
To show what context we’re in right now: what tab is selected, we will add the class a.current to the CSS:
ul.tabs a.current {
background: white;
color: black;
margin-bottom: -1px;
padding-bottom: 4px;
}
The background is set to white, so the current tab will stand out in comparison with the not-selected tabs. The text color is set to black as well to further stimulate the same effect.
You may also notice that the bottom padding is set to one pixel higher (3px + 1px = 4px) than the rest of the tab elements. At the same time, the bottom margin is set to -1. This little trick make the current element higher, while retaining the same alignment – ultimately overwriting the bottom border of the <div id="header"> earlier introcuded.
The final result will now look like this:
Voila! The code in its entirety looks is:
<style><!--
#header {
width: 100%;
float: left;
border-bottom: 1px solid #aaa;
}
ul.tabs {
margin: 0;
padding: 0;
list-style: none;
}
ul.tabs li {
margin: 0;
padding: 0;
float: left;
}
ul.tabs a {
text-decoration: none;
display: block;
margin: 0 2px 0 2px;
padding: 3px 10px;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
background: #ddd;
color: #888;
}
ul.tabs a.current {
background: white;
color: black;
margin-bottom: -1px;
padding-bottom: 4px;
}
ul.tabs a:hover {
background: white;
}
--></style>
<div id="header">
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#" class="current">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
</div>
This document was last updated at January 29, 2008
Thanks for putting such a simple, easy to understand tut. This is what I have been searching for all over. Cheers!