Creating a Tabbed Navigation menu

Here’s another navigation tutorial but this time im being a bit different, since my last navigation tut Creating A Drop Down menu I wanted to be a bit different and step away from the boring one level navigation bars. Well in this tutorial you will learn how to create a tabbed navigation menu, complete with a under tab description feature, which when you hover on a certain tab a description will appear below the navigation bar, I’ve seen a few of these around, but most of them use javascript when really you don’t need it if your looking for something simple. Im going to teach you how to create this using HTML lists and CSS styling no javascript involved.

Before we start..

Before we get started you might want to save these two images to your own computer before we begin I’ve used a couple of gradients to make the navigation tabs look nice and pretty. The two images are below:

Navigation Tab (Normal State):

Navigation Tab (Hover State):

Just right click on the images and save them somewhere accessible on your computer, I’d recommend you don’t change the image names because the tutorial will follow the image names that are currently set. Once you’ve done that just keep hold of them till the CSS styling part!

Coding the Base of the navigation

First of all we need to code the base of our navigation otherwise we don’t have anything to work with! We start by coding base code which is this:

<div id="tabnavigation" class="description">
  <ul>
   <li><a href="#">Tab 1</a></li>
   <li><a href="#">Tab 2</a></li>
   <li><a href="#">Tab 3</a></li>
   <li><a href="#">Tab 4</a></li>
   <li><a href="#">Tab 5</a></li>
   <li><a href="#">Tab 6</a></li>
   <li><a href="#">Tab 7</a></li>
   </ul>
 </div>

Notice the ID and class applied to the navigation base code. At the moment these don’t mean anything, but when we get to the CSS part you’ll see why there both applied.

Intergrating the under tab descriptions

Now were going to implement the descriptions which will appear on certain tabs. They won’t work yet because we haven’t styled anything, but I think it’s important for you to see how the descriptions will intergrate with the navigation tabs. Refering back to a previous tutorial, I showed you how to code a multi level navigation menu that would drop down and display multiple navigation levels, if you didn’t read it you click here to refer to it. Why am I refering to this tutorial you ask? Well during that tutorial I explained how the ‘navigation tree’ works by using lists and being able to nest lists within lists correctly, which creates levels. If you don’t know what I mean just quickly scan over the navigation tree sections and look at the lists in both image and code form.

Though we are not creating a drop down system on this navigation bar we are creating descriptions to appear when someone hovers over a certain tab. So how could we do this without using javascript? We could create a seperate div and include all of the descriptions within that div and then apply a REL to the anchor linked to that tab but then that would require more work than required. Shall I let you in on the little secret? Oh alright then, in actual fact we could class the under tab descriptions as a second level of the navigation bar, although it is not a drop down the descriptions can be built into the lists code themselves and then styled in CSS as if they were a second level drop down. So for the tabs that we want to have a description appear underneath we would add this to the current code:

<div id="tabnavigation" class="description">
  <ul>
   <li><a href="#">Tab 1</a></li>
   <li><a href="#">Tab 2</a>
   <ul>
     <li>This is the description for Tab 2, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 3</a>
    <ul>
     <li>This is the description for Tab 3, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 4</a></li>
   <li><a href="#">Tab 5</a>
   <ul>
     <li>This is the description for Tab 5, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 6</a></li>
   <li><a href="#">Tab 7</a></li>
   </ul>
 </div>

The descriptions are built in as second levels, which makes it alot easier to manage.

Styling the Navigation Tabs

You’ll notice that there are two parts to this navigation bar, the HTML layout div tabnavigation and it’s class description. Lets first style the navigation tabs. Now because were using the theory of levels and the navigation three in this navigation bar the whole navigation is coded in lists as you’ve seen, so thats right it’s going to be list styling in the CSS! If you hate lists and list styling already, then don’t worry I did, but you get used to it. Later on you’ll find that lists make navigation bars much more easier to manange and allow you to create better navigation bars. Anyway lets style the tabs:

/* Tabbed Navigation Style */

#tabnavigation { font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; letter-spacing:-0em; width:75%; height:49px;  border-bottom:1px solid #DEDEDE; margin-top:20px; }

#tabnavigation ul { list-style-type: none; }

#tabnavigation li{ display: inline; margin: 0; } /* Don't Add any width change here, if you do everything will fall on your head. Instead editing the padding on the list item anchor styling line */

#tabnavigation li a { background:url(normal-tab.png); text-decoration:none; color:#232323; float:left; border:1px solid #DEDEDE; border-bottom:none; padding:15px 35px 15px 35px; margin-right:10px; }

#tabnavigation li a:hover { height:26px; margin-top:-7px; color:#FFFFFF; background:url(selected.png); }

Thats all of the styling for the tabs, now all we need to do is add in the description styling, which isn’t much:

Styling the Description feature

/* Description tabs styling */

.description ul li ul { display: none; }

.description ul li:hover ul { font-style:italic; font-size:16px; display:block; position:absolute; top:85px; position:absolute; left:0; }

Notice how I’ve styled it as if it was the second level much like in a drop down state. Thats it though, two lines to create a description that displays on certain tabs that have the it set. I’ve set the description to appear under the navigation tab in a general way, so you may want to add your own addition when modifying the styling for yourself.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Tabbed Navigation with under tab description</title>

<style type="text/css">

/* Tabbed Navigation Style */

#tabnavigation { font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; letter-spacing:-0em; width:75%; height:49px;  border-bottom:1px solid #DEDEDE; margin-top:20px; }

#tabnavigation ul { list-style-type: none; }

#tabnavigation li{ display: inline; margin: 0; }

#tabnavigation li a { background:url(normal-tab.png); text-decoration:none; color:#232323; float:left; border:1px solid #DEDEDE; border-bottom:none; padding:15px 35px 15px 35px; margin-right:10px; }

#tabnavigation li a:hover { height:26px; margin-top:-7px; color:#FFFFFF; background:url(selected.png); }

/* Description tabs styling */

.description ul li ul { display: none; }

.description ul li:hover ul { font-style:italic; font-size:16px; display:block; position:absolute; top:85px; position:absolute; left:0; }

</style>

</head>

<body>

 <div id="tabnavigation" class="description">
  <ul>
   <li><a href="#">Tab 1</a></li>
   <li><a href="#">Tab 2</a>
   <ul>
     <li>This is the description for Tab 2, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 3</a>
    <ul>
     <li>This is the description for Tab 3, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 4</a></li>
   <li><a href="#">Tab 5</a>
   <ul>
     <li>This is the description for Tab 5, You could put what the page is about here, but really it's up to you</li>
    </ul>
   </li>
   <li><a href="#">Tab 6</a></li>
   <li><a href="#">Tab 7</a></li>
   </ul>
 </div>

</body>
</html>