30 CSS and Javascript Tabs Solutions


Tabs have been around for a long time, they are nothing new, but with so many sites (blogs, ecommerce sites, web apps…) needing to show as much content and navigation as possible, they have never been so relevant.
They are the perfect web page tidying up solution for organizing cluttered content in a space-limited web page. Seperating content into tabs keeps everything nice and compact, clutter free and are always at the ready should a user need it.

In this round-up 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

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3
Sweet Tabbed Navigation Bar using CSS3 →
Demo →

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area
CSS3-Only Tabbed Area →
Demo →

Using CSS to Create a Tabbed Content Area

Using CSS to Create a Tabbed Content Area
Using CSS to Create a Tabbed Content Area →
Demo →

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript
CSS3 Hover Tabs without JavaScript →
Demo →

Javascript Based Tabs Tutorials

Sweet AJAX Tabs (jQuery)

Sweet AJAX Tabs (jQuery)
Sweet AJAX Tabs →
Demo →

Animated Tabbed Content (jQuery)

Animated Tabbed Content (jQuery)
Animated Tabbed Content →
Demo →

Sliding Tab Menu for Sidebar (jQuery)

Sliding Tab Menu for Sidebar (jQuery)
Sliding Tab Menu for Sidebar →
Demo →

Organic Tabs (jQuery)

Organic Tabs (jQuery)
Organic Tabs →
Demo →

Slot Machine Tabs (jQuery)

Slot Machine Tabs (jQuery)
Slot Machine Tabs →
Demo →

Create Flipping Content Tabs (jQuery)

Create Flipping Content Tabs (jQuery)
Create Flipping Content Tabs →
Demo →

Create A Tabbed Interface (jQuery)

Create A Tabbed Interface (jQuery)
Create A Tabbed Interface →
Demo →

jQuery UI Tabs with Next/Previous (jQuery UI)

jQuery UI Tabs with Next/Previous  (jQuery UI)
jQuery UI Tabs with Next/Previous →
Demo →

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)
Building a Better Blogroll: Dynamic Fun →
Demo →

Moving Tab and Sliding Content (jQuery)

Moving Tab and Sliding Content (jQuery)
Moving Tab and Sliding Content →
Demo →

Slick Tabbed Content Area (jQuery)

Slick Tabbed Content Area (jQuery)
Slick Tabbed Content Area →
Demo →

Sexy Animated Tabs (MooTools)

Sexy Animated Tabs (MooTools)
Sexy Animated Tabs →
Demo →

Tabbed Interface / Tabbed Structure Menu (jQuery)

Tabbed Interface / Tabbed Structure Menu (jQuery)
Tabbed Interface / Tabbed Structure Menu →
Demo →

Fancy Sliding Form (jQuery)

Fancy Sliding Form (jQuery)
Fancy Sliding Form →
Demo →

Simple Tabs (jQuery)

Simple Tabs (jQuery)
Simple Tabs →
Demo →

Javscript Based Tabs Plugins

mb.tabset (jQuery)

mb.tabset (jQuery)
mb.tabset is a useful component that lets you build a tabbed interface really quickly and easily; and you can even sort your tabs as you want by dragging and dropping.
mb.tabset →
Demo →

SimpleTabs (MooTools)

SimpleTabs (MooTools)
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.
SimpleTabs →
Demo →

Perspective Tabs (Mootools)

Perspective Tabs (Mootools)
Perspective tabs (formerly Sliding Tabs) is a simple MooTools plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site.
Perspective Tabs →
Demo →

MooTabs (MooTools)

MooTabs (MooTools)
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.
MooTabs →
Demo →

idTabs (jQuery)

idTabs (jQuery)
idTabs →
Demo →

DOMTab – Navigation tabs with CSS and DOMscripting

DOMTab - Navigation tabs with CSS and DOMscripting
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.
DOMTab – Navigation tabs with CSS and DOMscripting →
Demo →

jQuery UI Tabs

jQuery UI Tabs
jQuery UI Tabs →
Demo →

jQuery Accessible Tabs Plugin

jQuery Accessible Tabs Plugin
jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.
jQuery Accessible Tabs Plugin →
Demo →

Tabify (jQuery)

Tabify (jQuery)
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) →
Demo →

nanotabs

nanotabs
nanotabs →
Demo →

jQuery Pager

jQuery Pager
jQuery Pager →
Demo →

jQueryGlobe

jQueryGlobe
This tiny (2kb) slick jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
jQueryGlobe →
Demo →

About Raashid A.

Web Designer & Front-end Developer with Social Media Marketing & SEO

5 responses to “30 CSS and Javascript Tabs Solutions

  1. thanks for sharing.. good one!

  2. my sister is an addict on Slot Machines, she always play any kind of game on the slot machine ‘-’

  3. “~’ I am very thankful to this topic because it really gives up to date information “`-

  4. It is Wonderful! Thanks a lot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: