7 Tools to Add Tabs To Your Website Content

Posted By Keith Dsouza On May 22, 2008 @ 7:44 am In Tips And Tricks | 9 Comments

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 [1], 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 [2] 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 [3] is advanced tab creator which features tab scrolling, adding tabs programmatically and a context menu plugin.

MooTabs

mootabs-screenshot

MooTabs [4] 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 [5] 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 [6] 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 [7] 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 [8] 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.


Article printed from Techie Buzz: http://techie-buzz.com

URL to article: http://techie-buzz.com/tips-and-tricks/7-tools-to-add-tabs-to-your-website-content.html

URLs in this post:

[1] how to add tabs to your website: http://techie-buzz.com/reader-query/reader-query-how-to-use-tabs-to-compact-content.html

[2] JavaScript Tabifier: http://www.barelyfitz.com/projects/tabber/

[3] Advanced Tabs: http://extjs.com/deploy/dev/examples/tabs/tabs-adv.html

[4] MooTabs: http://www.silverscripting.com/mootabs/

[5] YETTI: http://www.kminek.pl/lab/yetii/

[6] TabView: http://www.dhtmlgoodies.com/index.html?whichScript=tab-view

[7] Control.Tabs: http://livepipe.net/projects/control_tabs/

[8] DOMtab: http://www.onlinetools.org/tools/domtabdata/

[9] Javascript: http://technorati.com/tags/Javascript

[10] Javascript tabs: http://technorati.com/tags/Javascript%20tabs

[11] tabbed content: http://technorati.com/tags/tabbed%20content

[12] html tabs: http://technorati.com/tags/html%20tabs

[13] create tabs: http://technorati.com/tags/create%20tabs

[14] tab scripts: http://technorati.com/tags/tab%20scripts

[15] add tabbed content: http://technorati.com/tags/add%20tabbed%20content

Copyright © 2006-20011 Techie Buzz. All rights reserved.