The script relies on width and height of tabs and content, so if you want to use it to display images (like below) you have to hard-code the dimensions of your images in your css, or preload them.

If you want to create vertical tabs you must set a concrete height for your tabs.

This isn’t really a bug, but I didn’t add any style to the css, so if you want it to look pretty you’ll have to do some css work.

As a new feature, I’m working on adding some ajax functionality.

If you have any suggestions for other features or find some bugs feel free to email me at meweltman(at)yahoo.com.

Perspective tabs is a simple mootools 1.2 plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site.

First, you must include mootools and the scripts and css in your page.:

Then just create a new sliding_tabs object with a set of tab elements and a set of tab content elements. These must be in the same order i.e.:

<div class="tab">tab1</div>
<div class="tab">tab2</div>
<div class="tab">tab3</div>
<div class="tab_content">tab_content1</div>
<div class="tab_content">tab_content2</div>
<div class="tab_content">tab_content3</div>
Then create the object:
new sliding_tabs($$('.tab'),$$('.tab_content'),{active_tab_class:'active_tab'});

NOTE:
For horizontal tabs, you must set a width value for #tab_overflow in your CSS. Similarly, for vertical tabs you must set an height value for #tab_overflow. This will define how wide or tall you want the visible tabs to be. Play with it, and have fun!

Options:

The third argument (much like many mootools plugins) are options, they are:

active_tab_class – The className of the active tab.
scroll_fx_duration – The duration of the scroll between tabs. For no effect set to 0. Defaults to 500.

To create horizontal tabs:
orientation – set to ‘horizontal’
tab_margin_left – The margin to the left of the left-most tab
tab_margin_right – The margin to the right of the right-most tab

To create vertical tabs (note: your tabs must have a set height):
orientation – set to ‘vertical’
tab_margin_top – The margin to the top of the top-most tab
tab_margin_bottom – The margin to the bottom of the bottom-most tab

-silding tabs can reposition itself to the center of a container or window (see below). to accomplish this you need to enable 3 options

container_reposition – set this to true
container – the container your tabs are in
outer_container – the container you want the tabs to center inside of. To center in the window, set to ‘window’
offset – The offset +/- where the container will be centered.

Demo: http://www.mattweltman.com/sliding_tabs.html

Download: Java: http://www.mattweltman.com/scripts/sliding_tabs.js
Css: http://www.mattweltman.com/css/sliding_tabs.css

Source: http://www.mattweltman.com/sliding_tabs.html

Related Listings:

1. Sliding Tabs using Mootools Sliding Tabs is a mootools 1.11 plugin which adds a...
2. Tabs with Moo tools plugin This is MooTabs! Using a slightly modified CSS file and...
3. Fancy Sliding Tabs Menu The Fancy Sliding Tab Menu is back and better than...
4. Control.Tabs Script Control.Tabs attaches creates a tabbed interface from an unordered list...
5. Floating Window With Tabs This is a cross browser DHTML window script with support...

Tags: ajax , animated tabs , Bugs , Classname , Content Elements , Duration , Functionality , Horizontal Tab , Horizontal Tabs , images , Moo Tools , MooTools , New Feature , New Tabs , Orientation , Overflow , Perspective , Scripts , sliding tabs , Space Thanks , Vertical Tab , Yahoo