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!. :)

It’s been exactly one year since I first introduced 16bugs on this very blog. And it’s been a great experience!

16bugs was my first Rails full-blown app and since then I’ve learnt a lot, both as a developer and as an entrepreneur.
During this year, I established my first company with two of my best friends and released two new apps — Unilife and Pagety. But with that came a much bigger effort from me to keep things running smoothly and, especially in the past few months, I’ve been devoting most of my time to this, while neglecting a bit my social life — blogging included ;) –…shame on me. Yet the thing is I love doing this stuff!

Ahead I see even busier days! We’ll soon start working on a very cool app for a client and on the side we have at least two more we’d like to internally develop.
Plus, I’d like to release a new version of 16bugs as soon as possible which will be RESTful, finally!

Meanwhile, you can enjoy a great offer on both Pagety and 16bugs:

• Use coupon code ‘launchfest’ when upgrading your Pagety account, you’ll get a 50% discount on any plan for up to one year
• If you upgrade your 16bugs account before Sunday, you’ll get an extra month for free

And now for some sleep — which I’m in deep lack of…

So yesterday we launched Pagety. We opted for a stealth launch during the week-end and will try to get some good coverage at the start of the next week.

What is Pagety?

To put it simply, Pagety is a cross between a CMS and a hosting platform.
There’s no reason to uncouple those two functionality which are vital to every business: a way to easily manage your website and a reliable place to host it.
What’s better than managing both from the same place?

You can read the full announcement on our company blog.

It’s been a pretty intense start of the year and I’ll now relax for a couple of days and then start working on some client work, while listening to the feedback coming from Pagety’s users and making it even better! :)

Edited: Digg it!

I know, I know, I’ve been neglecting this poor ol’ weblog of mine for so long…and I’m frankly quite ashamed of it.
But you know, life gets busy, and days become weeks, and weeks become months. ;)

As I’ve already mentioned before, we’re working on a new Web application which is going to launch in the next few hours.
Meanwhile, we’ve launched our company blog where we’ll write about our business and projects, and lots of other different stuff.
I’d be very happy, if you decided to take a look at it and subscribe to the feed.

Our next app is called Pagety and it’s a very simple and easy to use hosted CMS. I know it’s not very explicative, but I’ll say more when the announcement comes.
In the meantime, make sure you sign-up to be notified when we open the doors to everyone.

Now that we’re almost done with our last project — not that I won’t have anything to do, then — and that I have another blog to look after, I hope I’ll get back into the blogosphere.
I have quite a long list of things to write about, a couple of how-tos, but I never seem to get the time to seat down and write them.

Anyway, watch out for the announcement!