CSS Expandable Tabs

A nice way to implement you navigation is to organize it into tabs. Way back when, before I started using CSS, I used to make tabs the hard way…image by image. If you still do this now, then I’ll show you how CSS can save you a lot of time and effort.

To start, we still need to make the image of the tab, but we’ll only need two images.

The First Image (tabstart.jpg):

Explanation:

This image should be at least as long as your longest link.

The Second Image (tabend.jpg):

Explanation:

This image will be applied to the right end of the previous image as you can already figure out.

Now here comes the easy part.

CSS:

#nav ul
{
    float:left;
    list-style-type:none;
    margin:0px;
    padding:0px;
    width:300px;
}
#nav ul li
{
    float:left;
    background:url(images/tabstart.jpg) no-repeat;
}
#nav ul li a
{
    float:left;
    background:url(images/tabend.jpg) top right no-repeat;
    padding:0 20px 0 20px;
    text-decoration:none;
    font-weight:bold;
    color:#FFFFFF;
    line-height:30px;
}
#nav ul li a:hover
{
    text-decoration:underline;
}

Explanation:

We don’t need to use <ul></ul> tags for this. You can use <p></p> tags or even <div></div> tags.

First, we have to set the list-style-type to “none” so that we can get rid of the bullets in the lists.

Second, we set the background of the <li></li> to tabstart.jpg and make sure to set it to “no-repeat.”

Thirdly, we set the background of the <a></a> tags to tabend.jpg and make sure to set it to “top right no-repeat.” This will place the image to the very right of the link. We also need to add padding to both sides of the link so the text doesn’t run into the edges of the tabs.

The last part, adding an underline effect, is optional.

HTML:

<div id="nav">
    <ul>
        <li><a href="http://www.csswoes.com/" target="_blank">Home</a></li>
        <li><a href="http://www.csswoes.com/about" target="_blank">About</a></li>
        <li><a href="http://www.csswoes.com/contact" target="_blank">Contact Us</a></li>
    </ul>
</div>

Results In: