List of JavaScript Tab Navigation Scripts
This past weekend I’ve been working on a free Premium WordPress theme for you. I was looking for a good tab navigation script to add to the theme. To allow for better navigation and to add a cool feature to the theme. I found a tons of tab scripts with various frameworks. The list below is some very good tab scripts.
- Yetii – Yetii is an extremely light weight tab script. It is built with no framework and is very easy to install. You can even have a tab nested within another tab.
- Advanced Tabs – Advanced Tabs is an EXT JS plugin that allows you to add tabs, tab resizing, and tab scrolling. The code has some very cool features.
- Sliding Tabs – Sliding Tabs is a mootools 1.11 plugin that shows the content slide over when you click on the tab or arrow button. It is a really neat effect.
- DOMTab – DOMtab is JavaScript that turns a list into a tabular content. It is very lightweight and is easy to implement. It degrades very nicely if your visitor doesn’t allow javascript. DOMtab does have some problems with divs inside the tab content but it is a great script.
- Coda-Slider – Coda-Slider is a jQuery Plugin that slides the content over when you click on the tab or the arrow button. It is a cool effect and is fairly easy to install on your site.
- Scriptaculous Tabs – Scriptaculous tabs requires the use of obviously scriptaculous and prototype. The script allows you to create interactive tabs for your site and the content box stretches as the more content you put into it.
- Ajax Tabs – Ajax Tabs is an easy to implement Dynamic CSS Tab. The user can add and remove tabs (and content) without refreshing the page. It is a very cool concept but just needs some work to make it even better.
- MooTabs – MooTabs is a tiny(3kb) class for MooTools. It’s main purpose is to help out with the creation of simple tab navigation. The newest addition to MooTabs is that it now retrieves the content via ajax. It is very easy to install and if you have MooTools than I suggest you check it out.
- TabView – TabView is built on Yahoo! UI library and is a good Tab navigation script. It is pretty easy to implement and will allow you to create the same effect that is on Yahoo! homepage.
- JavaScript Tabifier – JavaScript Tabifier converts your lists into a tabbed navigation. It is built with no framework and gracefully degrades if JavaScript is not present. With JavaScript Tabifier you can have a tab within a tab and you can use a cookie to remember which tab was selected so it remains selected when you return to the page.
If you have any you would like to add or have used some of the above scripts please comment below.
Related Posts
Tags: Ajax, Javascript, jQuery, mootools, Navigation, Prototype, Tabs, YUI
Pingback: AJAX coding school » Blog Archive » AJAX News [2008-04-01 05:02:30]
hi there.thanks for this tip but im just wondering if this can work on my blog.this is,it’s from blogger.if it works and if you can help me,please give a line or two.i would really appreciate your help.thanks again.cheers!
alternatively,you can email me at marcdionisio2006@gmail.com.thanks again.
Pingback: roScripts - Webmaster resources and websites
Pingback: diarioTHC | Diferentes interfaces con navegación en “tabs”
@marc, I did some searching on Google and found the following links about adding a tab navigation to blogger. The post is broken up into two parts, but you really just need to follow the first part. If you still need help don’t hesitate to ask.
Part 1 http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html
Part 2 http://hoctro.blogspot.com/2007/05/introducing-tabview-widget-part-2.html
Pingback: links for 2008-04-02 | iKeif
I am not such a huge fan of these techniques with an eye on SEO. I prefer using php so every page is really a special page in stat of loading the pages this way with javascript. How does everybody else think about this?
Edwin: I don’t know about all of these scripts, but the one I created called “Sliding Tabs” does not use Ajax to load any data. All the data shown is in the html of the page, and is just selectively hidden and shown as needed. This shouldn’t affect search engines at all.
@Edwin – When originally writing this list I wasn’t looking for SEO, I was mainly looking at the user interaction. I really think that user interaction is much more important than SEO. But they do go hand in hand. I mean without visitors then no user interaction.
Pingback: Valontuoja » Blog Archive » Kaoottinen linkkidumppi
I almost always enjoy what I read on this site. 🙂
WOW! Thanks
I need a tab in tab solution. the solutions above looks very nice. but where can i get a script for my needs?
Here is the url for the Ajax Tab Code – Snippet Code for Simple Ajax Tabs with cool CSS Styles – http://www.developersnippets.com/2007/05/19/snippet-code-for-simple-ajax-tabs-with-cool-css-styles/
Check this out and let me know your feedback…
Cheers!
Vivek [http://www.developersnippets.com]
you might also want to add AllWebMenus (JavaScript menu maker) http://www.likno.com.
Here is another javascript tab control that can extend your list:
http://dhtmlx.com/docs/products/dhtmlxTabbar/
I have page with four simple tab navigation and all the tabs are forms. So if I submit any form it redirects to first tab but i want to keep it to the same form how do i do it. Please any has solution or any suggestion on it.
DOM tab is the one i prefer.
gonna try it very soon.
thanks a lot
this is useful information. Thks
nice site, WHAT A CRAZY WORLD WE LIVE IN please use your position of influence to spread the truth about the Olympic 2012 false-flag terror attacks (huge LIES like 9/11 and 7/7) due to take place in london because US/UK/EU/Isreal is running out of excuses to attack Iran/Syria. Thanks mate. Appreciate it =)
I enjoy, result in I discovered exactly what I was having a look for.
You’ve ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye
Siller’s family created the Foundation’sONSet the best of a $187check out approximately $92 and potential consumers will convert absent. While you are it true which the easy gladness in a bestAfter interviewing gurus that counsel
They key here is to always make sure that you do not strain yourself.
I am browsing this web site and reading very informative articles. 🙂