Loading...

Tabbed Navigation

Ghost
in
Tutorials

Tabbed NavigationThis 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!

Copyright © . All Rights Reserved