ZENVERSE » Tools & Scripts http://zenverse.net Design and Web Development Tue, 15 Jan 2013 15:12:59 +0000 en-US hourly 1 http://wordpress.org/?v=3.5 ZenTabs – A jQuery Tabbed Menu Script http://zenverse.net/zentabs-tabbed-menu/ http://zenverse.net/zentabs-tabbed-menu/#comments Tue, 29 Sep 2009 15:05:36 +0000 Zen http://zenverse.net/?p=1019 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.]]> 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 2968 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.

?View Code HTML
<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:

?View Code HTML
<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:

?View Code HTML
<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:

?View Code HTML
<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:

?View Code HTML
<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.

]]> http://zenverse.net/zentabs-tabbed-menu/feed/ 13