Tabs are the perfect web page tidying up solution for organising cluttered content in a space-limited web page. Separating content into tabs keeps everything nice and compact, clutter-free and the content is always at the ready should a user need it.
In this round-up from Speckyboy Design Magazine, we have a variety of easy to use modern tabs solutions, techniques, tutorials and plugins, most of them make use of a variety of Javscript libraries (MooTools, jQuery…), but you will also find some innovative pure CSS solutions as well.
Pure CSS Tabs Tecniques & Tutorials
Javscript Based Tabs Plugins
Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.
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. As of version 1.2, you can also set tab content via an Ajax request.
DOMTab – Navigation tabs with CSS and DOMscripting →
jQuery Accessible Tabs Plugin →
This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.
Tabify (jQuery) →