CSS tabbed menu
The links
The first thing we need to do is set up the links. This can be done using unordered-lists. An id will be added to make the styles easy to attach.
<ul id="tabmenu">
<li><a href="link1">Link 1</a></li>
<li><a href="link2">Link 2</a></li>
<li><a href="link3">Link 3</a></li>
</ul>
Vertical tabs
Creating vertical tabs is easy because lists automatically put the elements on new lines, so we simply need to decorate them.
#tabmenu
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
Now that the lists have been styled you can add decoration to the individual links.
#tabmenu li
{
padding: 4px;
margin: 4px;
background: #CCCCCC;
}
#tabmenu a
{
text-decoration:none;
}
Horizontal menu
A similar approach is used for horizontal tabs, lists can still be used but we need to ‘float’ them next to each other.
#tabmenu
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#tabmenu li
{
padding: 4px;
margin: 4px;
background: #CCCCCC;
float:left;
}
#tabmenu a
{
text-decoration:none;
}