37+ Great Ajax, CSS Tab-Based Interfaces

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.

Pro Tip

Sign up for a free Jotform account to create powerful online forms in minutes — with no coding required.

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-1

2) Rotating jQuery tabs

37+ Great Ajax, CSS Tab-Based Interfaces Image-2

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-3

Sliding Tabs

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-4

5) Coda-Slider

Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.

37+ Great Ajax, CSS Tab-Based Interfaces Image-5

6) Perspective tabs

Formerly Sliding Tabs uses mootools that allows for a large number of tabs to fit into a small space.

37+ Great Ajax, CSS Tab-Based Interfaces Image-6

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-7

Closeable Tabs

8) Tab Panes

Two Versions with close and add panes.

37+ Great Ajax, CSS Tab-Based Interfaces Image-8

9) Closeable Tabs Module

The Closeable Tab widget allows tabs to be removed.

37+ Great Ajax, CSS Tab-Based Interfaces Image-9

Must see Examples

10) Fabtabulous

Simple tabs using Prototype

37+ Great Ajax, CSS Tab-Based Interfaces Image-10

11) JQuery TabContainer Theme

JQuery style fade animation that runs as the user navigates between selected tabs

37+ Great Ajax, CSS Tab-Based Interfaces Image-11

13) MooTabs

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

37+ Great Ajax, CSS Tab-Based Interfaces Image-12

14) TabView component

The TabView component is designed to enable developers to create navigable tabbed views of content.

37+ Great Ajax, CSS Tab-Based Interfaces Image-13

15) Fancy Sliding Tab Menu

This cool menu is developed in script.aculo.us

37+ Great Ajax, CSS Tab-Based Interfaces Image-14

16) Control.Tabs

Unobtrusive CSS tabs for Prototype.js

37+ Great Ajax, CSS Tab-Based Interfaces Image-15

17) Zapatec Ajax Tabs

This demo uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically.

37+ Great Ajax, CSS Tab-Based Interfaces Image-16

Ajax Tab Generators

18) 15daysofjquery- jQuery Tabs

A simple form that you can use to generate the markup for the tabs.

37+ Great Ajax, CSS Tab-Based Interfaces Image-17

Advanced Tab Techniques

19) Advanced Tabs

This TabPanel is built entirely with javascript and demonstrates: Auto tab resizing, Tab scrolling, Tabs with icons, Tab plugins (context menu), Adding tabs with JS.

37+ Great Ajax, CSS Tab-Based Interfaces Image-18

20) Floating window with tabs

This script is based on simple ordinary div tags. This makes it very easy to set up. Put in your HTML content and call a javascript function to initialize the window.

37+ Great Ajax, CSS Tab-Based Interfaces Image-19

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-20

22) Ajax Tabs Reloaded

User can add or remove tabs (and content) without refreshing the page.

37+ Great Ajax, CSS Tab-Based Interfaces Image-21

23) JQuery Nested Tab

37+ Great Ajax, CSS Tab-Based Interfaces Image-22

CSS Only Tabs

24) Cross browser tabbed pages with embeded links

NO javascript – just CSS – and it validates. Just hover over the tabs to display a page of text with a picture and embedded links. A working scroll bar is added for each page as required.

37+ Great Ajax, CSS Tab-Based Interfaces Image-23

25) CSS Tabs

The goal was to build CSS tabs without using any images or hacks and with as little CSS as possible.

37+ Great Ajax, CSS Tab-Based Interfaces Image-24

26) CSS-driven tabs

37+ Great Ajax, CSS Tab-Based Interfaces Image-25

27) CSS-driven tabs

37+ Great Ajax, CSS Tab-Based Interfaces Image-26

28) CSS Tabs

Based on Joshua Kaufman’s version

37+ Great Ajax, CSS Tab-Based Interfaces Image-27

29) Hidden Tab menu

A simple hidden tab menu that opens when the tab is hovered.

37+ Great Ajax, CSS Tab-Based Interfaces Image-28

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-29

31) Updated Simple CSS Tabs

CSS Tabs with nested menu.

37+ Great Ajax, CSS Tab-Based Interfaces Image-30

32) CSS Tabs with Submenus

This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists.

37+ Great Ajax, CSS Tab-Based Interfaces Image-31

33) Simplified CSS Tabs

37+ Great Ajax, CSS Tab-Based Interfaces Image-32

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.

37+ Great Ajax, CSS Tab-Based Interfaces Image-33

Ajax Tab Tutorials

35) Dynamic Ajax Tabs in 20 Lines

Dynamic Ajax Tabs in only 17 lines of code thanks to the Prototype Javascript framework.

37+ Great Ajax, CSS Tab-Based Interfaces Image-34

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+ Great Ajax, CSS Tab-Based Interfaces Image-35

37) CSS Tabs

A great tutorial to teach us how to create a css tabs.

37+ Great Ajax, CSS Tab-Based Interfaces Image-36

Photo by Heidi Fin on Unsplash

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: