30+ CSS Tab Navigation Scripts for Bloggers and Web Designers

Tabbing navigation should not be confused with tabbed document interface In computing, tabbing navigation is the ability to navigate between focusable elements (such as hyperlinks and form controls) within a structured document or user interface (such as HTML) with the tab key of a computer keyboard. Usually, pressing Tab will focus on the next element, while pressing Shift + Tab will focus on the previous element. The order of focusing can be determined implicitly (based on physical order) or explicitly (based on tab index). In general, tabbing is cyclical, not linear, meaning that the tabbing will cycle to the first/last element when it moves away from the last/first element.

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Advanced Tabs from EXT JS 

This is the most powerful tabs component that I can found. It comes with a lot of features such as auto tab resizing, tab scrolling, icons, context menu plugin, and also add/remove tabs via script.

Article : http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html






Nanotabs 

Nanotabs is a tiny version of idTabs that doesn’t require jQuery. It is only 2KB in size!

Article : http://www.sunsean.com/nanotabs/







Ajax Tab Reloaded 

Taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.

Article : http://blog.fueledsoftware.com/m/blogs/fueleddev/demos/demo.html






Control.Tabs 

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.

Article : http://livepipe.net/control/tabs





JavaScript tabs with jQuery 

jQuery plugin that lets you create JavaScript tabs very easily. Examples of simple tabs, custom tabs, slide effects, fade effects and callbacks demos available.

Article : http://stilbuero.de/jquery/tabs/





CSS Menu With Slider 

This little example shows how to make really simple and yet very nice CSS Menu with slider.

Article : http://dragan.yourtree.org/blog/en/2007/05/11/css-menu-with-slider/






CSS drop down menu 

Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.

Article : http://moronicbajebus.com/playground/cssplay/drop-down-llama-menu/







jQuery Coda-Slider 

Nice sleek tabs that slides through each tab.

Article : http://www.ndoherty.biz/demos/coda-slider/1.1.1/




Fabtabulous – Simple tabs using Prototype 

This is a tab implementation using another famous Javascript framework – Prototype.

Article : http://tetlaw.id.au/view/blog/fabtabulous-simple-tabs-using-prototype/




DD Tab Menu from Dynamic Drive 

DD Tab Menu is a standards compliant, 2 level tab menu script. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

Article : http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm






DOM dynamic Tabs 

DOM dynamic Tabs allows you to easily create tabbed content on the fly without creating HTML.

Article : http://www.ajaxlessons.com/2006/02/24/dom-dynamic-tabs/






HTML Dog CSS Tab 

A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don’t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.

Article : http://www.htmldog.com/articles/tabs/






jQuery Thickbox 

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Article : http://jquery.com/demo/thickbox/







jQuery idTabs 

It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

Article : http://www.sunsean.com/idTabs/






Tab Accordian 

Tab navigation with sleek animation using Moo FX.

Article : http://www.nyokiglitter.com/tutorials/tabs.html




DHTML Goodies Tab Panes 

Tab navigation with a close [x] button on each tab.

Article : http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html





dhtmlxTabber – AJAX powered DHTML Javascript Tabber component 

This AJAX-enabled component lets you create nice looking and feature-rich tabs easily. You can put your tabs to left, right, top or buttom aligned according to the predefined or your own style.

Article : http://www.dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml







Tabtastic 

Tabtastic supports multiple or nested tabsets on the same page and allow users to bookmark the page loading to a specific tab.

Article : http://phrogz.net/JS/Tabtastic/index.html






Fancy Sliding Tab Menu 

Included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

Article : http://www.andrewsellick.com/examples/tabslideV2/



Tab Pane 

The look and feel of Tab Pane is entirely decided by CSS. So, you can change it easily through creating different styles.

Article : http://webfx.eae.net/dhtml/tabpane/tabpane.html






SimpleTabs by Komrade 

SimpleTabs doesn’t depend on any third party Javascript library so it will not cause any conflict if you are already using any Javascript library such as jQuery or MooTools. It is small in size and can remember last tab clicked before you reload your page.

Article : http://komra.de/labs/simpletabs/







Closeable Tabs module 

The closeable tabs module allows tabs to be removed. The HTML markup for this tabs module is same as standard tabs module.

Article : http://www.nodetraveller.com/sandbox/moduleTabs/closeable.php






Yahoo UI Library: TabView 

This is another tab component by Yahoo UI Library. It comes with a cheat sheet, good tutorials and also examples.

Article : http://developer.yahoo.com/yui/tabview/






Brainjar 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.

Article : http://www.brainjar.com/css/tabs/demo.html




Kollermedia Tab Menu 

This ia a Javascript tab implementation that used by Kollermedia. The author implemented the script by himself and decided to share the scripts with us after received feedbacks from his readers.

Article : http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange/






Ajax Project – Tabbed Page Interface 

This is a script that can load a new page to the tab without a page refresh.

Article : http://www.crackajax.net/tabs.php







AJAX Tabs (Rails redux) 

Using Ajax to load information that does not need to be retrieved every time the user pulls the record.

Article : http://actsasflinn.com/Ajax_Tabs/index.html






Ajax Project – Tabbed Page Interface 

There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.

Article : http://www.crackajax.net/tabs.php





Core Design Magic Tabs 

Nice tab plugin for Joomla.

Article : http://www.greatjoomla.com/extensions/plugins/core-design-magic-tabs-plugin.html






JQuery Nested Tab Set 

Nested tab set done with the ExtJS UI Library.

Article : http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo





Perspective Tabs 

Simple mootools plug-in that allows for a large number of tabs to fit into a small space.

Article : http://people.cs.uchicago.edu/~meweltman/sliding_tabs.html




XP Style Tab Panes 

To get this script working properly, simply put your content into separate “div”s and then call a javascript function which creates the tabs dynamically.

Article : http://www.dhtmlgoodies.com/index.html?whichScript=tab-view







qrayg CSS Menu 

4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.

Article : http://qrayg.com/experiment/cssmenus/


DOMTab – Navigation tabs with CSS and DOM Scripting 

DOMTab is a popular Javascript tab implementation script. Basically, it will turn a list of links connected to content sections into a tab interface. You can get example code through the website.

Article : http://www.onlinetools.org/tools/domtabdata/





JavaScript Tabifier – Automatically create an html css tabs interface 

This is a plug-and-play Javascript tab script. To use it, simple include the js file and make some minor modifications to your current html code. Use CSS to customize the tabs’ appearance.

Article : http://www.barelyfitz.com/projects/tabber/






Ajax Tabs Content Script from Dynamic Drive 

This is an Ajax tabs script that lets you display content pulled from external files inside a “div” and organized wia CSS tabs.(Non-Ajax version here)

Article : http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/







Fancy Menu 

Custom navigation bar with some cute Javascript effects that will certainly impress your friends.

Article : http://devthought.com/cssjavascript-true-power-fancy-menu/




Creative Pony Sliding Tab 

Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site.

Article : http://creativepony.com/archive/demos/sliding-tabs/





JQuery Tab Animation 

A sample that show how you can add tab transition animations to your existing Tab Panel Controls.

Article : http://mattberseth2.com/tab_animation/