56 CSS Tabs & Navigation Menu Scripts and Examples

Tabbed navigation is a popular form of navigation and is a group of links that give the impression of being projections attached to different areas of unseen content. This will make the problem of a user’s needs to navigate through a site to locate content and features much more easier and provides them with a clear indication of their current location in the site. Using tab based navigation always is an interesting technique which reduces the effort to open and close multiple windows.

Also, tab based navigation is much more useful when you are space constrained, i.e, you want to shoe more content in less space, or to show important or most helpful contents at the top while hiding the less important contents, yet want them to be available for the users. Most of the tabs which are used nowadays are being designed using CSS and made functional using JavaScript and Ajax.

There are different kinds of tab based navigation designs available for use if you search through the internet. While some used traditional CSS and Javascript, some of the tabs are made possible through AJAX which makes them adorable and much easier to use.

Here is a list of CSS and Ajax based tabs that we found, which may be useful for you to use in your sites/blogs to make it more interesting.

1. Cross Browser Tabbed Pages : This uses only CSS and no Javascript or AJAX, and is the simple of all that we found. Just hover your mouse over the tabs and the contents are displayed below.

Currently two different types are available.

One with a fixed height tab contents, which adds scroll bars to the contents when necessary.Another one with varying content height which adjusts the height of the content division to accommodate the whole contents, without a scroll bar.

2. CSS Tabs 2.0 : CSS tabs without using any images or hacks and with as little CSS as possible.

3. CSS Driven tabs : Just pure HTML & CSS

4. Hidden Tab Menu : Well, this can’t be said as an example for a pure tab based navigation. But by the way it is presented, a tab which shows menu and hovering mouse over it showing the hidden menu, it can be considered as a sort of tab menu.

5. Updated Simple CSS Tabs : These tabs provide you with tabs with nested Menus inside each tab content at the top.

6. CSS Tabs with Sub-menus: This is a way of accomplishing tabs and sub-navigation using only CSS and nested unordered lists. The home tab has no sub-items, the rest do.

7. Simplified CSS Tabs : It uses just a styled, unordered list and a 1×1 pixel image to create the bottom border — thereby bomb-proofing the display for most modern browsers.

8. CSS Mini-Tabs: The un-tab, tab. An example of an alternate take on pure, CSS tabs using just a styled, unordered list and no images or tables.

9. Simple CSS Tabs : One where the user can click on individual tabs to view different content within the same space.

10. Standard Tabs Module : The Standard Tab widget provides standard features for a tab widget.

11. Close Tabs and Add New Tabs Dynamically: You can either Close a Tab or Add New Tab using this Tab, which uses Javascript to remove or create new tabs dynamically. The disadvantage is that the contents in the tab are from external files.

12. Closeable Tabs Module: The Closable Tab widget allows tabs to be removed.

13. Draggable Tabs: The Draggable Tab widget allows tabs to be dragged (and dropped) between one or more modules.

14. Ajax Tab Content: 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. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slide-show” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. Inspired from Yahoo’s homepage , which employs such a concept to show news in an organized fashion.

15. Rotating UI Tabs: Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab. Tabs supports loading tab content via Ajax in an unobtrusive manner.

16. Easy Tabs 1.2 – With Autochange: You can now set a auto-change modus to one of your menus. Accessible compact and compatible with all browsers as always.

17. Slideshow Tabs: Supports “slideshow” mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.

18. Sliding Tabs : Sliding Tabsis a mootools 1.11 plug-in which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn was very similar to a widget used in the iTunes Music Store.

19. Coda-Slider Sliding Tabs : Now you can target individual tabs and give each one a different look.

20. Perspective Tabs: Perspective tabs is a simple mootools 1.2 plug-in that allows for a large number of tabs to fit into a small space.

21. Fabtabulous: Fabtabulous! Simple tabs sing Prototype javascript library.

22. JQuery TabContainer: Implement a JQuery style fade animation that runs as the user navigates between selected tabs. You can add tab transition animations to your existing Tab Panel Controls.

23. Accordion Style Tabs : Tabs which switches with an accordion like effect suing moo.fx library.

24. MooTabs: This is MooTabs! Using a slightly modified CSS file and Fx.Transitions.Back.easeOut as changeTransition

25. Yahoo! UI Library: TabView: The TabView component is designed to enable developers to create navigable tabbed views of content.
26. Fancy Sliding Tab Menu: The menu is developed in script.aculo.us and has some extra features as requested in comments after the last version of theFancy Sliding Tab Menu.

27. 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. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

28. Zapatec AJAX Tabs: Uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically.

29. ExtJS Advanced Tabs: TabPanel built entirely with javascript

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

31. AJAX Tabs (Rails redux) : Using Ajax to load information that does not need to be retrieved every time the user pulls the record. The methods used here are to yield absolute control over where the content comes from, what conditions trigger action, and how the panes are presented. This is really meant to be used in an application because the javascript and css are heavy if you are only using them on one page.

32. JQuery Nested Tab Set: This will provide you with a set of tabs nested inside a parent tab, made using jQuery plugin.

33. jQuery Tabs: A nifty little plugin that creates accessible unobtrusive javascript tabsusing jQuery.

34. Clean Digg Like Tabs: Clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS andjust one background image to manage all status for each tab (standard, active, hover).

35. jQuery idTabs: idTabs is a plugin for jQuery.It makes adding tabs into a website superA simple.But it can also open the door to endless possiblities.

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

37. Vertical CSS Menus : 14 interesting Vertical tab menus.

38. JavaScript Tabifier : Automatically create an HTML tab interface using plug-and-play JavaScript.

39. dhtmlxTabbar : JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.

40. Centered Tabs with CSS : Since CSS Tab navigation it relies heavily on floats for the positioning of its tabs, we’re constrained to either left- or right-hand navigation. But what if we need a bit more flexibility? What if we need to place our navigation in the center?

41. CSS Tab Designer: CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

42.Light Weight Low Tech CSS Tabs : An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

43. Module Tabs – Carousel: Example of showing one page of content at at time in tabs. Each tab link scrolls to the page selected. Since all animation is turned off (animationSpeed = 0) then it just moves the desired content into view.

44. Tabbed Navigation Using CSS : Create low-bandwidth tab navigation on a web page using CSS. As an extra bonus you’ll also learn how to switch tabs without loading the page more than once.

45. Duoh’s 2nd Level Tab Menu

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

47. Fancy Menu : Custom navigation bar with some cute Javascript effects.

48. Bulletproof Slants : Designs that are as fast, flexible and accessible as possible.

49. CSS Menus v2 : Dynamic menu examples are driven completely by CSS and work in all modern browsers.Internet Explorer is the exception, of course. IE6 requires some “hover” help, and IE 7 retains some z-index bugs.

50. DOMTab: 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.

51. CSS Tabs Menu with Dropdowns: Create dropdowns when the top level menu item is hovered over. This uses the Son of Suckerfish method for the dropdowns, as seen on HTML Dog.

52. Animated Horizontal Tabs : These sliding doors based blue tinted tabs “jump up” when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab.

54. Inverted Shift Down Menu : This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it.

54. Inverted Shift Down Menu II : This inverted horizontal menu creates tabs where the active tab is both longer and its text offset downwards compared to its less active counterparts. It does this by manipulating the tab’s top/bottom padding values plus the color of its bottom border.

55. DD Tab Menu : DD Tab Menu is a standards compliant, 2 level tab menu. Move your
mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

56. Flexible Navigation : Navigation bar achieved via images, a bit of CSS and some JavaScript.