Smoothtabs: site navagation effects based on mootools.

To demo, click a tab above.

Download Smoothtabs 0.2


Step 1: Include Smoothtabs

<script src="js/mootools.1.11.js" type="text/javascript"></script>
<script src="js/HistoryManager.js" type="text/javascript"></script>
<script src="js/Smoothtabs.js" type="text/javascript"></script>

Step 2: Setup your menu

<ul class="smoothtabs-menu">
  <li id="about-current"><span class="hide">About</span></li>
  <li id="work"><span class="hide">Work</span></li>
  <li id="contact"><span class="hide">Contact</span></li>
</ul>

Step 3. Create your content.

Make sure your div id's match your menu's anchor hrefs. (e.g. #about goes to about-data),
your initial section to display has the class of content-data-current and
the initially hidden div's have a their 'display' style set to 'none'

<div class="smoothtabs">
  <div id="about-data" class="smoothtab-current">
    <p>This is the about section... this is some info all about us!!</p>
  </div>

  <div id="work-data" class="smoothtab" style="display:none">
    <p>This is the work section... this is a section all about the work begin done to smoothtabs.</p>
  </div>

  <div id="contact-data" class="smoothtab" style="display:none">
    <p>This is the a section on how to contact us.</p>
  </div>
</div>

Style as necessary.