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. Separating 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 →
Demo →

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 →
Demo →

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript →
Demo →

Javascript Based Tabs Tutorials

Sweet AJAX Tabs (jQuery)

Sweet AJAX Tabs →
Demo →

Animated Tabbed Content (jQuery)

Animated Tabbed Content →
Demo →

Sliding Tab Menu for Sidebar (jQuery)

Sliding Tab Menu for Sidebar →
Demo →

Organic Tabs (jQuery)

Organic Tabs →
Demo →

Slot Machine Tabs (jQuery)

Slot Machine Tabs →
Demo →

Create Flipping Content Tabs (jQuery)

Create Flipping Content Tabs →
Demo →

Create A Tabbed Interface (jQuery)

Create A Tabbed Interface →
Demo →

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 →
Demo →

Moving Tab and Sliding Content (jQuery)

Moving Tab and Sliding Content →
Demo →

Slick Tabbed Content Area (jQuery)

Slick Tabbed Content Area →
Demo →

Sexy Animated Tabs (MooTools)

Sexy Animated Tabs →
Demo →

Tabbed Interface / Tabbed Structure Menu (jQuery)

Tabbed Interface / Tabbed Structure Menu →
Demo →

Fancy Sliding Form (jQuery)

Fancy Sliding Form →
Demo →

Simple Tabs (jQuery)

Simple Tabs →
Demo →

Javscript Based Tabs Plugins

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)

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 (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 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 →
Demo →

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 →
Demo →

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)

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 →
Demo →

jQuery Pager

jQuery Pager →
Demo →

jQueryGlobe

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

You might also like…

50 Refreshing CSS Tutorials, Techniques and Resources →
50 Awesome New jQuery Plugins →
40 High Quality CSS and XHTML Web Layout Templates →
40 Professional and Detailed Web Layout PSD Templates →
20 Free Web UI Element Kits and Stencils →
25 Completely Free Fonts Perfect for @fontface →
The Complete Web Design Style Series (700 Designs in 14 Categories) →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →

About the Author: Paul Andrew (564 Articles)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.

Comments and Reactions

Partners

Our iOS App