This effect rely’s on the moo.fx (and moo.fx.pack) framework, as of writing this I am using version 1.2.3. The effects consists of a script function, a small css sheet, and some html code. So to implement this effect you will need to import the moo.fx, moo.fx.pack, prototype, and the javascript file I wrote (which you may modify to meet your specific needs).

Once you have imported the javascript pages it’s time to write some html. Ok so ensure this effect you have to have a few different elements, first a div that contains all of contents of the tabs and then a div for each tab. After that you’ll want to write a div with a ul where each li is a tab button corresponding. The important thing in this step is make sure that your tabs match in number in order to the tab buttons. This can be seen on the example page.

The next step is to add CSS to the equation, for the short term I’m going to recommend that you use my style sheet and then modify it for your specific needs. And the corresponding class and id to the tags. The hierarchy is as follows (forgive the extra spaces):

<div id=”tabsection” class=”tabsection”>

<div class=”atab”>

…content of tabs…

</div>

…continue divs for each tab…
</div>

<div class=”tabbar” >

<ul class=”pull” >

<li class=”tabbutton” >…tab title…</li>
…continue with li’s for each tab…

</div>
final example