Latest version is 1.0.2, what has changed?
If you noticed my tweet, I started to learn jQuery few days ago because I need it to create a photoblogging theme. To test my understanding I need to try making something, so this is the outcome : a tabbed menu script.
I named it after my name. ZenTabs is a light-weight tabbed menu script powered by javascript and jQuery. It can have unlimited tabs, can be styled using CSS and more.
File size : ~ 3 Kb
Requirement : jQuery (tested using version 1.3.2)
Tested and compatible with : Firefox 3 , Opera 9 , Opera 10 , IE 6 and Safari.
Price : Free (even for commercial purpose)
License : GPL
The following link show a demo with two tabbed menus running together in a same page, without conflicts.
ZenTabs Demo
ZenTabs - jQuery Tabbed Menu Script 1.0.2
[ Downloaded 4034 times | ]
Check back soon, an important update (wordpress thumbnail feature and version checker) is rolling out to all Zenverse themes, starting from the latest theme.
Include this between <head> tag and change the URL to css and js file if they were put in different directory.
We have to prepare the tabbed menu for users that disable javascript. Therefore, we make our structure like this:
Tab Title 1
Tab Content 1
Tab Title 2
Tab Content 2
Without javascript, all you see were contents from top to bottom.
Basically, this is what all about:
As you can see at above, you just have to add a div of class name "onetab" and a new tab will appear. If you are still not sure, here’s how:
Tab Title 1
Tab Content 1
Tab Title 2
Tab Content 2
Tab Title 3
Tab Content 3
Since ZenTabs uses CSS class name to do its work, you can easily customise it using the class name. However, there is something you need to know:
This is the new structure once the script is loaded:
Tab Content 1
Tab Content 2
Simply add a class "firsttab" to any "onetab" to make it show once loaded. EG – show tab#2:
Tab Title 1
Tab Content 1
Tab Title 2
Tab Content 2
Open zentabs.js and edit the first few lines. Instructions were included in the file.
Version 1.0.2
- Now it works even if you load other library such as prototype, scriptaculous or mootools
Version 1.0.1
- Fixed an error in coding : Object doesn’t support this property or method
Version 1.0
- First version of ZenTabs
If you have any problem, just leave a comment here.
I spent a lot of time making themes, plugins and scripts. If you like this theme and would like to support my works, you can donate via PayPal using the button below.
Thank you.
Hey there, welcome to ZenVerse Blog!
I blog about stuffs that I am interested in, from Web Design & Development to WordPress Themes & Tips, SEO, Creative Inspirations, Google, Mac OS and Android OS.
While my online working environment is focused mainly on Wordpress, I make free wordpress themes, premium wordpress themes and wordpress plugins. Besides, I give out free downloadable resources to the readers.
· Subscribe to All Updates
· Subscribe to Specific Category Only
ZenVerse is Zen's web journal about web design and development.
Zen is from Malaysia.
More about Zen »
![Post thumbnail of [Javascript] Search Box to Show Default Text on Load and Cleared When Focused](http://zenverse.net/wp-content/uploads/2012/07/searchtext_125.jpg "[Javascript] Search Box to Show Default Text on Load and Cleared When Focused")
i love this script. very easy to implement even for the non-coders like me. i have one question though. it may be redundant but what i want to add a link in the buttom of the page so that when the user clicks it it opens up the next tab? how am i gonna do this? thanks. more power.
well i kind of like your script , but there is a question that i have , what if i want to use more than one style on website , like as you said can be used multiple times , which saves me a lot of my in loading too many scripts, but , at one part of site it want it to fade and other i want it to slide , is that possible ?
Not possible in this version. You can edit the script to achieve that yourself, since development was discontinued .
Awesome..
This help my trouble…
Thumb up!
How can I to let tabcontent to expand itself? Because the target content could be bigger than width 300px(default). After I tried to use CSS overflow visible, then it’s no work!
thanks, for everythink you shared..actually your theme i like your’theme and i used on my site thanks..
hi! first of all thanks alot for this helpful script!
is it possible to load a link or iframe into the tab?
thanks alot
I have been looking for a tab menu. I really like what you have here, and if I use it I will donate.
I have a question. Lets say the user clicks on Tab 3 and in that tab there are 4 links. They click a link to go to that page. When on that page I still want Tab 3 to remain open. Do you have a setting for that in a javascript to activate firtab dynamically based on URL?
I would like to use the tab control as the main navigation. How do I make the tab name clicable as a link? I tried using onclick=”" but it does not work.
Its really nice….
I just tested on http://www.pakrides.com
Thanks Admin