7 Tools to Add Tabs To Your Website Content
By on May 22nd, 2008

If you may not have noticed the current design and Techie Buzz’s earlier designs, we have been making heavy use of tabs to compact content. It benefits both users as well as the site to compact content and present it in a nicer way.

Some time back we had also given a detailed tutorial on how to add tabs to your website, today in this post we will introduce you to 7 different tools that will allow you to add tabs to your own website.

JavaScript Tabifier

javascript-tabifier-screenshot

JavaScript Tabifier which uses CSS and JavaScript to create tabs to group content together. If you want to add tabs for your site you can download the script from the website. I prefer the light version of Tabifier which is around 5Kbs in size and does not cost much on site load time.

Advanced Tabs

advanced-tabs-screenshot

Advanced Tabs is advanced tab creator which features tab scrolling, adding tabs programmatically and a context menu plugin.

MooTabs

mootabs-screenshot

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.

YETTI

yetti-thumbnail

YETTI use lightweight , object oriented code to create tabs for your content, the script in itself is not dependant on any other library or framework.

TabView

tab-view-screenshot

TabView is a script that will allow you to add tabs for your content using simple JavaScript code. The tabs also have a close button allowing the user to close any particular tab.

Control Tabs

control-tabs-screenshot

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly.

DOMtab

domtab-screenshot

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

Summarizing

Adding tags to your website not only compacts content but also makes it easier for your users to browse them.

Having tabs also definitely helps you to use less space to show more content.

What tab tools are you using for your websites? What are your favorites? Don’t hesitate to tell me I am more than eager to know about them.

Tags: ,
Author: Keith Dsouza Google Profile for Keith Dsouza
I am the editor-in-chief and owner of Techie Buzz. I love coding and have contributed to several open source projects in the past. You can know more about me and my projects by visiting my Personal Website. I am also a social networking enthusiast and can be found active on twitter, you can follow Keith on twitter @keithdsouza. You can click on my name to visit my Google+ profile.

Keith Dsouza has written and can be contacted at keith@techie-buzz.com.
  • http://www.mymoldova.info Moldova

    These tabs are very good if your page space is limited.

  • http://www.dolonki.com.ua Eugene

    Control Tabs – nice one, i’m using it on some web-pages.

  • http://www.sizzledcore.com Haris

    Very nice list. I might use one of these for my new blog design :)

    • Keith Dsouza

      Glad you liked it Haris :) I used tabifier earlier and it was pretty good.

  • http://www.nirmaltv.com Nirmal

    This is really useful stuff Keith, I will be trying these out.

  • http://www.troublefixers.com abhishek

    quite usefull…i have never tried them but looks like some of them are worth a try.

  • http://techmalaya.com Syahid A.

    Dugg-ed! Fantastic list of tabs Keith. Keep the good post rolling!

  • http://www.lytebyte.com Joel

    In my next redesign, I have been looking for some tab designs….This should be helpful…

  • http://techmasher.co.cc pri2sh

    thanks for this list,
    I tried all the except control.tabs,domtabs & advance tabs and found JavaScript tabifier to be easiest to use and light. + well documented examples in site ,

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN