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.

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!

Get a Web Template:

Tabbed Navigation

SHARE THIS POST