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;
}

Code example ยป

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;
}

CSS tab example

Categories

Tags

No tags

Social