Connecting the dots…

I had to recently do a tabbed interface and I looked up for various implementations for tabbed interface mostly including one big image with a space in the middle or two different images one for the left section of the tab and one for the right tab. The solution that I eventually used was implementing it with just one image but it didnt have the white space in it and also was sprited to show both active and inactive tabs.

Advantages:

• Smaller image size
• Since the tabs (active and inactive) are sprited hence just one http call would get the required images
• Add a class “tabs” to any list item and mark anchor with class “active” to show active tab

Preview:

Markup:

<ul id="p-profile-menu" class="tabs">
  <li><a href="/fe_dev.php/user/basicprofile" class=""><span>Basic</span></a></li>
  <li><a class="active" href="/fe_dev.php/user/physicalprofile"><span>Physical Details</span></a></li>
  <li><a href="/fe_dev.php/user/socialprofile"><span>Social Profile</span></a></li>
  <li><a href="/fe_dev.php/user/otherprofile"><span>Other Aspects</span></a></li>
</ul>

CSS

.tabs {
  margin-top:5px;
  margin-left:-1px;
  border-bottom:1px solid #46A7D5;
  padding-bottom:5px;
}
  .tabs li {
    display:inline;
    padding:0 1px;
  }
    .tabs li a {
      text-decoration:none;
      padding-bottom:5px;
      padding-top:3px;
      padding-left:10px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 0 -105px;
      color:#fff;
    }
    .tabs li a span {
      padding-top:3px;
      padding-right:10px;
      padding-bottom:5px;
      margin-left:2px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 100% -105px;
    }
    .tabs li a.active {
      border-bottom:1px solid #fff;
      color:#000;
      background-position:0 0px;
    }
    .tabs li a.active span {
      background-position:100% 0px;
    }

and the image used was:

Spritied Image for tabs

Disclaimer: I am sure someone somewhere must have done this before, I am not claiming any credit for this, the idea for this post is to document this solution for anyone to use later.