NetTuts: Sexy Animated Tabs Using MooTools

By  on  
MooTools Tabs

I've just released my third NetTuts post:  http://net.tutsplus.com/tutorials/javascript-ajax/sexy-animated-tabs-using-mootools/ .  From the post:

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.

Go over to NetTuts and check it out!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

Discussion

  1. Great tutorial, I know you are a moo tools guru, but it would be a cool do a j-query version of this maybe… at somepoint (fingers crossed).

  2. Alex

    Nice one David, great tutorial. really great!

  3. Hey David, sleek simple little effect :)

    What I noticed though, is when I switch off javascript it does still work however it is really slow. From click to action about 4-5 sec.

    I used Firefox 3.5.7 and switched javascript off in the browser itself, not the webdeveloper toolbar or something similar.

    Greets

  4. Martin

    Hi David!

    Could you help me with this script?
    I need the possibility to “open/close” the tabs – and that all tabs are closed at the beginning when the Site loads…

    Please!!! I really need help with this!!!

    Thank you!!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!