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
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    CSS Sprites

    The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for the browser to download, which means...

  • By
    Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

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!