perspective tabs
Vertical Tabs
How to use
Features and Known bugs
Source code
content 1
content 2
content 3
content 4
content 5
content 6
content 7
content 8
content 9
Perspective Tabs 1 (for mootools 1.11) can still be found here.

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.:
<script type="text/javascript" src="scripts/sliding_tabs.js"></script>
<link rel="stylesheet" href="css/sliding_tabs.css" type="text/css" media="all"/>
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'});

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!
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)


note: you must download the core package, and the Fx.Scroll plugin

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
This link kills spam