Over the last few years web-developers have developed many AJAX and CSS Tab-based interfaces which became one of the most interesting techniques giving us an easy way to get information without the need to open and close multiple windows at the same time.
We’ve spent hours searching for the best Tab-based interfaces using CSS only, CSS/Ajax and tutorials which would help you create your own Ajax or CSS Tab-based interfaces.
We’d like to present the results of our search:
The Autochanging Tabs
1) Easy Tabs 1.2 with autochange– You can now set the autochange mode to one of your tab menus.
3) Slideshow Tab Content Script-“– Supports “slideshow” mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
4) Sliding Tabs– Sliding Tabs is a mootools plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store.
5) Coda-Slider– Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.
6) Perspective tabs– Formerly Sliding Tabs uses mootools that allows for a lagre number of tabs to fit into a small space.
Ajax Tab Content
7) Ajax Tabs Content Script– This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs.
8 ) Tab Panes– Two Versions with close and add panes.
9) Closeable Tabs Module– The Closeable Tab widget allows tabs to be removed.
Must see Examples
10) Fabtabulous– Simple tabs using Prototype
11) JQuery TabContainer Theme-JQuery style fade animation that runs as the user navigates between selected tabs
13) MooTabs– 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.
14) TabView component– The TabView component is designed to enable developers to create navigable tabbed views of content.
15) Fancy Sliding Tab Menu– This cool menu is developed in script.aculo.us
16) Control.Tabs– Unobtrusive CSS tabs for Prototype.js
17) Zapatec Ajax Tabs– This demo uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically.
Ajax Tab Generators
18) 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the tabs.
Advanced Tab Techniques
21) AJAX Tabs (Rails redux) The Concept here is using Ajax to load information that does not need to be retrieved every time the user pulls the record.
22) Ajax Tabs Reloaded User can add or remove tabs (and content) without refreshing the page.
CSS Only Tabs
25) CSS Tabs The goal was to build CSS tabs without using any images or hacks and with as little CSS as possible.
26) CSS-driven tabs
27) CSS-driven tabs
28) CSS Tabs– Based on Joshua Kaufman’s version
29) Hidden Tab menu A simple hidden tab menu that opens when the tab is hovered.
30) Inverted Sliding Doors tabs– Inverted tabs means that they are bottom-aligned, and as text size is increased, more and more of the tabs is revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.
31) Updated Simple CSS Tabs– CSS Tabs with nested menu.
32) CSS Tabs with Submenus– This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists.
34) Tabs– Using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space.
Ajax Tab Tutorials
36) Building Tabbed Content This workshop we will be building a tabbed content browser that’s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab.
37) CSS Tabs– A great tutorial to teach us how to create a css tabs.