37+ Great Ajax, CSS Tab-Based Interfaces

February 21st, 2008

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.

You might be interested to take a look at the links below:

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.

2) Rotating jQuery tabs

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.

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.

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

6) Perspective tabs– Formerly Sliding Tabs uses mootools that allows for a lagre number of tabs to fit into a small space.

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.

Closeable Tabs

8 ) Tab Panes– Two Versions with close and add panes.

9) Closeable Tabs Module– The Closeable Tab widget allows tabs to be removed.

Must see Examples

10) Fabtabulous– Simple tabs using Prototype

11) JQuery TabContainer Theme-JQuery style fade animation that runs as the user navigates between selected tabs

12) moo.fx Tab Accordion– Tab Accordion script using moo.fx

13) MooTabs– 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.

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

15) Fancy Sliding Tab Menu– This cool menu is developed in

16) Control.Tabs– Unobtrusive CSS tabs for Prototype.js

17) Zapatec Ajax Tabs– This demo uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically.

Ajax Tab Generators

18) 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the tabs.

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.

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.

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.

22) Ajax Tabs Reloaded User can add or remove tabs (and content) without refreshing the page.

23) JQuery Nested Tab

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 embeded links. A working scroll bar is added for each page as required.

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

26) CSS-driven tabs

27) CSS-driven tabs

28) CSS Tabs– Based on Joshua Kaufman’s version

29) Hidden Tab menu A simple hidden tab menu that opens when the tab is hovered.

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.

31) Updated Simple CSS Tabs– CSS Tabs with nested menu.

32) CSS Tabs with Submenus– This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists.

33) Simplified CSS Tabs

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.

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.

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) CSS Tabs– A great tutorial to teach us how to create a css tabs.

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

41 comments for „37+ Great Ajax, CSS Tab-Based Interfaces
  1. yusuf on February 21st, 2008 at 12:30 pm

    this is one of the best links i have ever found anywhere. thanks very much.

  2. peiman on February 21st, 2008 at 3:01 pm

    WOW! Thanks

  3. Robert on February 21st, 2008 at 4:11 pm

    Excellent post, thank you! This will surely help a lot of people.

  4. Infect The System on February 21st, 2008 at 6:52 pm

    This is one of the better resources I have seen lately. I definitely will be using a couple of these on my upcoming re-design of my website.

  5. Xoff on February 21st, 2008 at 9:05 pm

    OMG, so awesome!!!!!!!!!

  6. bali web designer on February 22nd, 2008 at 12:16 am

    amazing !, great list and thanks for sharing this, certainly will help many ppl.

  7. mumino on February 23rd, 2008 at 6:35 am

    wow really good. I see a lot of options.. some of them, I never think….

  8. Tom on February 25th, 2008 at 3:18 am

    Nice collection, I really appreciate accessible examples (ex. Coda Slider), that works even with js disabled.

  9. on February 26th, 2008 at 5:35 pm

    Good collection. Thanks.

  10. Geek on March 4th, 2008 at 11:28 am

    wwoooww thanks a lot, there is a month that i’m searching a tab func.

    I have to use the green one. is really cool


  11. Shane on March 30th, 2008 at 9:58 am

    A great ajax resource, thank u!

  12. Noupe on April 2nd, 2008 at 8:53 am

    Thanks everyone, stay tuned for our next ajax post:)

  13. Aranea on April 21st, 2008 at 6:16 pm

    Thank you!

  14. palPalani on April 25th, 2008 at 5:46 am

    awesome collections!

    thanks for for your great work!

  15. Saravanan.R on May 4th, 2008 at 5:07 am

    Really Cool Stuff.

  16. Deno on May 16th, 2008 at 2:18 pm

    This are very good CSS tabs. Looks nice. Thanks

  17. SasaVtech on June 1st, 2008 at 11:00 pm

    This is such a fantastic resource of AJAX tabbing!
    Many thanks!

  18. John Brown / Free Online Games on June 12th, 2008 at 5:16 pm

    WOW! Thanks

  19. Imran on June 18th, 2008 at 1:45 pm

    Just 1 word to describe this web page


  20. tvbtorrent on June 18th, 2008 at 10:47 pm

    is there any tabs that have side tabs instead of top tabs?

    all the tabs that i found have top tabs implemented. i’m looking for a side tabs function as i need to to display quite a lot of tab window.

  21. docwho on June 24th, 2008 at 5:59 am


    Great coda-slider!

    Thanks a lot!

  22. SD on July 15th, 2008 at 8:09 am

    Dude, this really is sweet! thx

  23. Chuks on July 18th, 2008 at 7:50 am

    This is amazingly helpful to the project I am developing

  24. M@rtijn on July 26th, 2008 at 2:18 am

    Thank you so much!

  25. Ivan on July 29th, 2008 at 8:19 am

    This one could extend the list: – Ajax-enabled Tabs control for creating dynamic tabbed-navigation interface.

  26. Mohd SAkib on August 4th, 2008 at 11:54 am

    Its exactly what I was looking for, thanks for such a gr8 list

  27. webmaster blog on August 5th, 2008 at 2:48 am

    thank you very good menus.

  28. Gift Bird on August 5th, 2008 at 9:16 pm

    I love these kind of lists. It makes it so much easier than having to scour the Internet for hours. Thanks so much for putting this together! I particularly like jQuery Nested Tab and Advanced Tabs.

  29. Raju on August 7th, 2008 at 4:14 am

    Nice Collection… Thank u ..

  30. Yury on August 8th, 2008 at 9:07 am

    thank yo for this nice collection.

    #20 Floating window with tabs what i’m looking for

  31. Mahima on August 19th, 2008 at 3:07 am

    Gr8.awesome stuff

  32. harun on August 21st, 2008 at 3:24 pm

    great work thanks a lot.

  33. hugo on August 24th, 2008 at 8:14 pm

    Excellent post, thank you! This will surely help a lot of people.

  34. on August 28th, 2008 at 5:56 am

    Thanks for putting this up. Real time saver!
    Liked #33: Simplified CSS Tabs

  35. mike on September 2nd, 2008 at 7:49 pm

    Some Nice collection.Thank you so much!

  36. anjum on September 4th, 2008 at 2:52 am

    Thank man wonderful collection of tab menus

  37. madhu on September 9th, 2008 at 3:06 am

    Some Nice collection.Thank you so much!

  38. lords on September 9th, 2008 at 10:01 am

    nice thanks

  39. nsgujof lmfqudts on September 12th, 2008 at 8:50 am

    ktlg spnxlhc iedtvkhcb ujldxn cjtq rvlfiy fhxae

  40. Hindsuismnet on September 18th, 2008 at 12:22 am

    Great collection of tab-based interfaces here. These are super ones and will help in future projects.

  41. Honour Chick on September 21st, 2008 at 5:19 am

    thanks alot ;)