Tabbed interface using a single image
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:
1 2 3 4 5 6 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .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.
