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

Incredible Demos

  • By
    CSS Background Animations

    Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

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!