11 Useful jQuery Tab Navigation Solutions

By / Sep 29, 2010 / Tutorials
shares

Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.

Create A Tabbed Interface Using jQuery

jquery tab navigation

A tutorial and plugin for creating an animated tabbed area.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

jquery tab navigation

In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

jquery tab navigation

This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.

Create a Slick Tabbed Content Area using CSS & jQuery

jquery tab navigation

This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Feature List

jquery tab navigation

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Fancy Sliding Form with jQuery

jquery tab navigation

This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

Create A Tabbed Interface Using jQuery

jquery tab navigation

This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.

Tabify

jquery tab navigation

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.

Accessible-Tabs

jquery tab navigation

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.

idTabs

jquery tab navigation

idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

jQuery Moving Tab and Sliding Content Tutorial

jquery tab navigation

Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

23 Comments

  1. Wez Pyke
    September 29, 2010

    Nice post, some really awesome navigation solutions.

    Reply
  2. rob t
    September 29, 2010

    On many of my blogs I’ve used a jquery box in the sidebar to show recent posts, recent comments, and popular posts.

    Reply
  3. Terry Dunn
    September 29, 2010

    Some of the slickest sites use tabs, and they save space but help you give more to your readers. This is a useful list from Henry.

    Excellent.

    Terry

    Reply
  4. CodeMyConcept
    September 29, 2010

    So many useful resources! JQuery is definitely a great way make website a lot more useful.

    Thank you so much!

    Reply
  5. Alex Flueras
    September 30, 2010

    Nice list of tabbed sliders. I find Fancy Sliding Form really neat. Great article. Thanks.

    Reply
  6. $hekh@r
    September 30, 2010

    Scripts from jQueryGlobe is good one.
    But I think jquery tabs can be achieved with a little bit scripts only. Why to use a plugIn.

    I have a tutorial on how to achieve jQuery tab with few lines of codes, see here: http://www.cssjunction.com/tutorials/jquery-tabs-too-easy-to-create-a-bit-jquery-a-bit-css

    Reply
  7. DesignMango
    September 30, 2010

    jQuery, what can’t it do?

    Reply
  8. Fareed khan
    October 4, 2010

    very nice article, i like JQUERY very much,Thanks for shaing this article..

    Reply
  9. Tejas Suthar
    January 25, 2011

    A huge collection of very interactive tabs. Thanks for sharing such a wonderful stuff to us.

    Reply
  10. tika
    May 9, 2011

    Thanx for sharing. nice article.

    Reply
  11. Creative design agency
    May 31, 2011

    Very useful jquery plugins. Thank you so much

    Reply
  12. Naveen P Suthar
    June 3, 2011

    Good Stuff… Thx for sharing such a nice and useful JQuery Interactive Tabs Plugin.

    Reply
  13. geobert adan son
    August 13, 2011

    nice documentation and sample of tabs…this one really help for me…thanks again…im really impress to use it…. ;)

    Reply
  14. Rupak Nepali
    February 5, 2012

    Really great collection of tabs love it, Thanks a lot

    Reply
  15. sorio
    May 15, 2012

    Thanks a lot! You saved me a lot of time and a lot of rows of codeing! :) Have a nice day!

    Reply
  16. Lucian
    June 3, 2012

    Nice examples, but .tabs() can do more! For example, on one of my websites (http://www.678voli.it/), I implemented on the homepage a “Latest Articles” section (similar to “Feature List”) that presents the last 4 news&photos in a very user friendly way, by using .tabs(). The news rotate every 10 seconds and the user can check it/stop the animation by simply moving the mouse over any news tab.
    If you like it, you may consider adding it to your list ;)

    Reply
  17. Dheeraj
    June 9, 2012

    Create a Slick Tabbed Content Area using CSS & jQuery : is really going to work in real web projects. Because it looks attractive and user friendly.

    Reply
  18. Web Design Solution
    June 10, 2012

    jquery have been on the top lately and can skyrock your website. Indeed their are many useful tips over here that can help you improve your website by using jquery. Many thanks to the author for these tips/tutorials plus some new ideas that we can implement.

    Reply
  19. Designs Blessign
    June 22, 2012

    Jquery really helps to build animated website. In past we use flash for these kinds of work but know Jquery really holds it. Very easy to use and also no requirement for flash player.

    Reply
  20. Sayan
    June 22, 2012

    i added tutorial on basic query tab and also an example with jcarousel

    http://fundapass.blogspot.in/2012/06/v-behaviorurldefaultvmlo_22.html

    Reply
  21. Hemn Kareem
    March 4, 2013

    The feature list site is down (http://jqueryglobe.com/article/feature-list), does anyone have another link where the files exist. I would be grateful if you re-post it.

    Thank you in advance.

    Reply
  22. Luciano F Moraes
    March 11, 2013

    Beautiful! Thanks!

    Reply
  23. kelly johnson
    March 12, 2013

    Pretty nice, but most tab systems should actually create a hash so that any tab can be directly linked to. Why make a user come to page “X” then, click say the fourth tab when it should be hotlinked so it would be: http://www.something.com/#fourth or whatever for bookmarking and sharing.

    Reply

Leave a Reply