ZenTabs – A jQuery Tabbed Menu Script

Post image of ZenTabs – A jQuery Tabbed Menu Script
Posted in Tools & Scripts on 29 September 2009 13 comments

Latest version

Latest version is 1.0.2, what has changed?

Introduction

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.

ZenTabs

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

Features

  • For every tabbed menu, you can have unlimited tabs
  • No conflicts if you have more than 1 tabbed menu in a single page
  • Can be styled using CSS
  • 3 animation styles (fade / slide / none) – default is slide
  • 3+ animation speeds (fast / normal / slow / time in ms)
  • Uses CSS class name to determine tab title and tab content

ZenTabs Demo

The following link show a demo with two tabbed menus running together in a same page, without conflicts.
ZenTabs Demo

Download

ZenTabs - jQuery Tabbed Menu Script 1.0.2
[ Downloaded 3181 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.

Using ZenTabs

Load the javascript and css

Include this between <head> tag and change the URL to css and js file if they were put in different directory.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="zentabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="zentabs.css" />
The HTML Structure

We have to prepare the tabbed menu for users that disable javascript. Therefore, we make our structure like this:

<div class="zentabs">
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 1</h2>
    <div class="tabcontent">Tab Content 1</div>
  </div>
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 2</h2>
    <div class="tabcontent">Tab Content 2</div>
  </div>
 
</div>

Without javascript, all you see were contents from top to bottom.

Basically, this is what all about:

  • Wrap the whole tabbed menu with any element of class name "zentabs"
  • Wrap a single set of tab and content with any element of class name "onetab"
  • Wrap the tab title inside "onetab" with any element of class name "tabtitle"
  • Wrap the tab content inside "onetab" with any element of class name "tabcontent"
Adding More Tabs

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:

<div class="zentabs">
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 1</h2>
    <div class="tabcontent">Tab Content 1</div>
  </div>
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 2</h2>
    <div class="tabcontent">Tab Content 2</div>
  </div>
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 3</h2>
    <div class="tabcontent">Tab Content 3</div>
  </div>
 
</div>
Styling ZenTabs

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:

  • The CSS class "zentabs" changes to "zentabs_live" once loaded.
  • One loaded, the tab titles are wrapped in an unordered list (ul) with class name "zentabs_ul"

This is the new structure once the script is loaded:

<div class="zentabs_live">
  <ul class="zentabs_ul">
    <li><a href="javascript:void(null)">Tab Title 1</a></li>
    <li><a href="javascript:void(null)">Tab Title 2</a></li>
  </ul>
 
  <div class="tabcontent_wrapper">
    <div class="tabcontent">Tab Content 1</div>
    <div class="tabcontent">Tab Content 2</div>
  </div>
 
</div>
Deciding which tab to show when it loaded

Simply add a class "firsttab" to any "onetab" to make it show once loaded. EG – show tab#2:

<div class="zentabs">
 
  <div class="onetab">
    <h2 class="tabtitle">Tab Title 1</h2>
    <div class="tabcontent">Tab Content 1</div>
  </div>
 
  <div class="onetab firsttab">
    <h2 class="tabtitle">Tab Title 2</h2>
    <div class="tabcontent">Tab Content 2</div>
  </div>
 
</div>
Change Animation Style and Speed

Open zentabs.js and edit the first few lines. Instructions were included in the file.

Changelog

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

Support

If you have any problem, just leave a comment here.

Like this script? Donate via Paypal

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.

 

Posted by Zen on 29 September 2009 • 48,965 visits 13 comments
Tags : ,


or Subscribe to specific category only :




  - 13 Comments


Sant says:

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.

blackproof says:

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 ?

zen says:

Not possible in this version. You can edit the script to achieve that yourself, since development was discontinued .

rhein says:

Awesome..

This help my trouble…
Thumb up!

Eric says:

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!

unr36 says:

thanks, for everythink you shared..actually your theme i like your’theme and i used on my site thanks..

Anton says:

hi! first of all thanks alot for this helpful script!
is it possible to load a link or iframe into the tab?

T.J. says:

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?

T.J. says:

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.

Admin says:

Its really nice….

I just tested on http://www.pakrides.com

Thanks Admin

Trackbacks

  1. ZenTabs – A jQuery Tabbed Menu Script | Choose Daily
  2. Tweets that mention ZENVERSE – ZenTabs – A jQuery Tabbed Menu Script -- Topsy.com

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»