64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

Sexy Animated Tabs Using MooTools

by

One modern, attractive way of placing a lot of content into a little space is by using a tab system. This tutorial will show you how to create a sexy, animated tab system complete with CSS sprites, cookies, and animated tab swapping.


MooTools Tabs

Assumptions

There are a few assumptions and notes that we're going into this system with:

  • We'll be using the most recent version of MooTools: 1.2.4.
  • The client must support JavaScript.
  • We'll be using PHP for any server-side scripting. Any server-side language of your choosing will also work its corresponding syntax/methods

The tutorial also assumes a basic knowledge of javascript. A tiny bit of MooTools or JavaScript framework experience will help.

The Plot

So how is this awesome system going to work? Here's the basic outline:

  • When the page loads, we output two UL lists with list items: the first list contains the tabs, the second list contains the tab content items.
  • For each tab set we output, we check for a given cookie that could tell us which tab should be displayed based on the previous visit. If no cookie is present, we assume the first tab.
  • When the user clicks a tab, the current content item for that tab slides out of view and the new tab content slides in.
  • We save the index of the tab in a cookie for future loading purposes (i.e. we want to make the last-clicked-tab the first to display on the next page/visit.)

The system itself is pretty bulletproof. If the user doesn't allow cookies, the starting tab for each list will always be 0.
If JavaScript support isn't present, the tabs wont be seen on screen as we'll display:none; them initially.

Step One: The HTML

The HTML to accomplish the tab system and corresponding content items is incredibly simple in structure.

We will be modifying the above HTML with PHP later in this tutorial to create a more robust system.

MooTools Tabs

Step Two: CSS

As with any CSS and HTML combo, you may style the tabs and their content items however you'd like.
I've chosen to use Facebook-style CSS sprites for my example tabs.
Realize that you'll want to style the following items in a specific fashion so that the system works:

  • The tab content items must have a height of 0 and their overflow's hidden. That allows for all of the content items to be "hidden", so to speak, when the page loads.
  • Between the "ul.tabs li a" and "ul.tabs li a.active" CSS selectors, you'll want to assign the "active" selector a different look so that the user knows its' the currently selected tab.

Note that we need to implement a few Internet Explorer-specific fixes; ugly, but necessary.

MooTools Javascript Framework

Step Three: The MooTools Javascript

One of the great advantages of MooTools is the powerful Class system.
MooTools classes allow for flexible, organized, and extendable functionalities.
Our MooTools class will be called "TabSet." Since the TabSet class performs many actions,
lets break down each part of the class.

The first line is always giving the class a name:

Next we need to create an object that will hold our class' options:

Our options allow us to define:

  • activeClass: The CSS class that should be assigned to the currently-selected (or "active") tab.
  • cookieName: The name of the cookie that will represent this tab set. If you don't define a cookie name, cookies wont be used.
  • cookieOptions: An object that holds the options for the cookie.
  • startIndex: The tab to make active initially. Starts with 0. Overridden by the activeClass variable if a cookie is found.

With only three options in the class, TabSet would be considered a relatively simple class.

Next we implement two Options and Events:

Implementing Options and Events will allow us to correctly handle given options and
fire custom Load and Change events on our lists anywhere within the class.

Next we define the "initialize" method which runs upon creation of every instance of the class:

Next comes the workhorse method of our TabSet class: processItem:

Here's the basic outline of what the processItem method does:

  1. Accepts a matching tab, content item, and its index...
  2. Calculates the height of the content element.
  3. Adds a click event to the tab that:
    1. Validates that this tab isn't already active (we don't want to animate or change anything if they click the already-active tab)
    2. Removes the "active" CSS class from the current tab and adds it to the tab that was just clicked.
    3. Slides the current tab's content out of view, then slides the new content into view. The "change" event is fired when the animation is complete.
    4. Saves the new tab's index to the cookie so that when the user reloads the page or goes to another page, the new tab will be selected initially.

And now a sample usage of our class:

We provide our instance the tab LI A's and the content LI's. We also provide the optional options argument. That's how easy it is to use this class! Here's the complete class with usage:

MooTools Cookies

Step Four: PHP / HTML

Remember how I said we'd be modifying our original HTML with PHP? Now's the time. Since we may
have a cookie set for our TabSet, we should attempt to detect that when we output the tab HTML.
Why? Because we want the tabs to load in smoothly. We also want to accommodate for users that don't have JavaScript or cookies enabled.
Without this PHP, you may notice a slight "jump" in the active content area.

Step Five: PHP: Accommodating For Users Without Javascript or Cookies

Some users don't enable JavaScript or cookies for security purposes. We still want our system to work for them though. If you recall from the previous block of code,
we're using links with a querystring key of "demo-list" to denote a change in tab. The following block of PHP at the top of the page (before ANY output) will
help us change the cookie value to the requested tab.

Note that we only refresh the page if we can verify that the cookie has been set. If the cookie hasn't been set, the user has their cookies disabled.

MooTools Cookies

Mission Accomplished!

Here's a quick summary of the benefits of the MooTools TabSet class:

  • Our class implements Events so that we may create custom events and event handlers.
  • The layout of the entire system is controlled completely by simple HTML and CSS.
  • The use of cookies to remember the previous tab is great usability improvement.
  • The very class that it's a MooTools class allows for it to be easily implemented from project to project.

The Inline MooTools Javascript

I've always advocated coding a desired MooTools functionality "inline" before turning it into a class. Here's the inline MooTools JavaScript code:

Notice that all of the "var" statements at the top either become arguments or options for the class. The transition from inline MooTools JavaScript to a class is extremely simple!

MooTools Tabs

Have Improvement Ideas?

Have more ideas for this class? Be sure to share them in the comments below!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We're looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you're of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial
Advertisement