Overlapping Tabs Made Simple

Steve Krug loves tabs for web page navigation and shares examples of tabs that work and those that don’t in his popular book on web usability “Dont’ Make Me Think.” In reading his thoughts on tabs, one insight that I gained is that for tabs to work really well, the visual representation should mimic real-world tabs used in binders, reports etc. While there are many scripts and components available for tabs, most of them tend to ignore an important aspect of tabs — overlapping. Some developers/designers use faux 3D to give this appearance, but nothing beats the real thing. Some quick CSS and Javascript later, I came up with the following:

The overlap is subtle, but in my testing, it does make a difference as the tab content pops up versus just appearing. You can see the difference it makes if you take a look at a tabbed-dialog in Windows. The overlap of tabs is minimal, but visually, it makes quite a difference.

My solution was to create a tab script that works equally well whether the tabs are created directly in HTML or indirectly through server-side script. The HTML for creating the above is quite simple:

 

• Home
• Products
• Support
• About

To “tabify” this code, you use the following Javascript:

renderTabs(“MyTabs”);

To add more client interactivity, you can pass two additional (optional) parameters:

– name of a function to call when a tab is clicked. The function is passed the unordered list DOM object and tab index that was clicked as parameters
– index of tab to display

Here’s an example:

renderTabs(“MyTabs”, “clickHandler”);

function clickHandler(ul, tabIndex)
{
      alert(“Tab “ + tabIndex + “ was clicked.”);
}

The script, including CSS, images and a sample handler is here: OverlappingTabs.zip (tested with IE6/7 and Firefox 1.5)