sliding tabs
How to use
Features and Known bugs
Source code
Lorem ipsum
Perspective tabs (formerly Sliding Tabs) is a simple mootools plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site. For a more mature example go here.
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) or post a reply to the topic in the mootools forum.

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
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
content 1
content 2
content 3
content 4
content 5
content 6
content 7
content 8
content 9
This link kills spam