Michele on the Road: on Travel, Photography and Life

Since releasing this design, the tabbed menu it sports has been featured in quite a few galleries and every now and then I’ll receive an email from someone asking how I implemented it.
Personally, I think it should be quite easy to understand how it works by giving a quick glance at the HTML/CSS, but it doesn’t seem so. So I decided to write a quick tutorial for posterity.

Get the HTML in place

First of all, you’ll have to write the HTML. I’ve used a very simple ul list with some properly assigned IDs:

<ul id="usection1" class="tabbed-menu">
  <li id="lsection1"><a href="#"><span></span>Section1</a></li>
  <li id="lsection2"><a href="#"><span></span>Section2</a></li>
  <li id="lsection3"><a href="#"><span></span>Section3</a></li>
  <li id="lsection4"><a href="#"><span></span>Section4</a></li>
</ul>

Basically, each li has got it’s own ID. Plus, the ul should be given a different ID based on where on the site we are.
Are we in Section 1? give it ID usection1. Is it Section 2? use usection2. And so on…

Set the CSS on fire

We want to use different images for each item in the menu, plus they have to change when the mouse rolls over and the active item should be different from the rest.
So we need three images for each item. In my example images have the following size: 84×59. Also note, the images already include the white padding.

Let’s style the lis and ul:

ul.tabbed-menu {
  display: block;
  float: right; /* In case you want it on the right */
  width: 336px; /* Width of an item * # of items */
  height: 59px; /* Height of an item */
}

ul.tabbed-menu li {
  overflow: hidden; /* No bits of text should spill out of the li */
  display: block;
  float: left;
  position: relative; /* What's inside the li should be absolutely
                         positioned INSIDE the li */
  width: 84px; /* Width of the image */
  height: 59px; /* Height of the image */
}

Now make each item look different:

#lsection1 a span, #lsection2 a span, #lsection3 a span, #lsection4 a span {
  /* It should fill the LI */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Basic look */
#lsection1 a span {
  background: url("section1.gif") no-repeat top left;
}

#lsection2 a span {
  background: url("section2.gif") no-repeat top left;
}

#lsection3 a span {
  background: url("section3.gif") no-repeat top left;
}

#lsection4 a span {
  background: url("section4.gif") no-repeat top left;
}

/* When ul's id and li's id match, it means that li is the active one */
#usection1 #lsection1 a span {
  background: url("section1-active.gif") no-repeat top left;
}

#usection2 #lsection2 a span {
  background: url("section2-active.gif") no-repeat top left;
}

#usection3 #lsection3 a span {
  background: url("section3-active.gif") no-repeat top left;
}

#usection4 #lsection4 a span {
  background: url("section4-active.gif") no-repeat top left;
}

/* Here we set the mouseover effect */
#lsection1 a:hover span, #usection1 #lsection1 a:hover span {
  background: url("section1-hover.gif") no-repeat top left;
}

#lsection2 a:hover span, #usection2 #lsection2 a:hover span {
  background: url("section2-hover.gif") no-repeat top left;
}

#lsection3 a:hover span, #usection3 #lsection3 a:hover span {
  background: url("section3-hover.gif") no-repeat top left;
}

#lsection4 a:hover span, #usection4 #lsection4 a:hover span {
  background: url("section4-hover.gif") no-repeat top left;
}

That’s it. You can change the number of items simply by changing the width of the ul and by adding the proper code to the CSS.
Mind you, the order in which the different blocks of code are written in the CSS IS important.

If you find this tutorial useful, please Digg it!. :)