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
    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...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

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!