Get a Web Template:

SEARCH

Web Design Basics

Web Design Showcase

Design Principles

Responsive Design

Tutorials

Photoshop Tutorials

Web Products

Launch a Site in 15 Minutes!

Advertise with Us!

Related Resources

Graphic Design Bundles

Real-Time Promo Codes

WordPress Coupon Codes

featured web templates

click to view this web template

click to view this web template

click to view this web template

Tutorials HTML and CSS Tutorials Tabbed Navigation

Tabbed Navigation

Ghost Tutorials Nov 28, 2006

This tutorial will teach you how to make a tabbed navigation for your site using lists and css.

To begin, create a new .html document, and add the following information into the <head> section of your page.

<style type="text/css">
#tabs{
    padding:0;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#FFF;
    font-weight:bold;
}
#tabs ul{
    list-style:none;
    margin:0;
    padding:0;
}
#tabs ul li{
    display:inline;
    margin:0;
    text-transform:capitalize;
}
#tabs ul li a{
    padding:5px 16px;
    color:#FFF;
    background:#E7A272;
    float:left;
    text-decoration:none;
    border:1px solid #D17B40;
    border-left:0;
    margin:0;
    text-transform:capitalize;
}
#tabs ul li a:hover{
    background:#EAEAEA;
    color:#7F9298;
    text-decoration:none;
    border-bottom:1px solid #EAEAEA;
}
#tabs ul li a.active{
    background:#EAEAEA;
    color:#7F9298;
    border-bottom:1px solid #EAEAEA;
}
#content{
    background:#EAEAEA;
    clear:both;
    font-size:11px;
    color:#000;
    padding:10px;
    font-family:Arial, Helvetica, sans-serif;
}
</style>

This code gives us the styling we need to make out navigation tabs. It uses lists, and each part of the list has been styled to create the tab like effect.

Feel free to modify/experiment with any of the above code to suit your needs.

After you have added that, create a div with the tabs id, and make a list with links inside. My example is shown below.

<div id='tabs'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Forums</a></li>
<li><a href='#' class='active'>Tutorials</a></li>
<li><a href='#'>Downloads</a></li>
<li><a href='#'>Links</a></li>
</ul>
</div>
<div id='content'>Your main content goes here!</div>

This will create something VERY similar to the menu we have here at TutorialFx.com. My final example is here.

Good luck!

NEED A WEBSITE?