This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Saturday, January 19, 2008

Mootools animated sidebar menu

Are you looking for an original menu for your new website? Take a look at this animated menu with MooTools.

This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

Download source file

This pack contains all source code, mootools framework and moofx.js file to enable visual effects.

A nice week-end to everyone :)

blog comments powered by Disqus
Anonymous said...

Excellent as usual!

superxtian said...

thanks a lot!^^

cloverfield said...

Very useful and nice effect. Bye!

SFdude said...

Antonio,

"Mootools animated sidebar menu"
works GREAT in Firefox 2.0.0.11,
under XP-Pro SP2 (latest updates).

But..when you load it in the latest version of IE6, on mouse hover, the menu items:
a) don't show the yellow color highlight,
-and-
b) the items don't move to the right.

Try it in IE6/XP!. Firefox is OK.
Ray
SF

Anonymous said...

Can I create tree menu with this script...You save my life Antonio!

Rahul Patwari said...

Sorry if this is an obvious question, but where is the tutorial? I downloaded the source files which included a folder called _notes, which was empty. Thanks!!

Antonio said...

@Raul: I download the ZIP file and it's all ok! Do you see index.html file?

Gökhan Gökçe said...

good job... thanks.. but it doesnt work on opera and ie6... maybe opera isnt important but ie is a trouble..
maybe you can help us ? ;) thanks

Radziu said...

I found the same bug in IE. At the end of the script is one extra coma. Try to copy my last three lines of the script and compare:


}
};
window.addEvent('load', Site.start);

Jonas Skoglund said...

What a great script! Looks beautiful.

How can I modify this script to just fade links inside a text block?

Theun de Bruijn said...

Thanks Radziu, that little typo did the trick.

Wicked little script :)

PS Website Design said...

Mootools is one of the best Javascript frameworks out there. Nice post.

Anonymous said...

really great! but how can i add an active status, so a selected menu item stays selected.

cha said...

wew ... almost all of ur posts are awesome ...

TJ said...

IS there any way to specify the movement per menu option, and not have each one move?

Thanks

Anonymous said...

Good job!
What changes would I have to make to get it to work with mootools 1.2?

Thanks in advance

Cheers

Anonymous said...

Yes, Radziu is correct - the extra comma on the penultimate line of the script needs removing to get the menu animation to function in IE.

Roman said...

Nice and usefull. Excellent!

Anonymous said...

Ahhh! u have done it again. Excellent tutorial. Is it possible to extend this so that it can become a drill down menu like in www.deviantart.com

Anonymous said...

The I.E fix is successful, it leaves firefox being able to render multiple instances of the effect.. on different elements such as menus and images: This is perfect. However, in I.E it only allows one instance ?

Matt Cash said...

Check out my implementation - http://businesscashadvance.ca

I am alos using jquery and so I had to use the var $j = jQuery.noConflict(); solution. Also, no matter what it would not work with IE so I had to make specific CSS just for IE to make it look pretty. Not surpsiringly, JQuery and Mootools do not work well together.

surferuk said...

anyone got this to work with mootools
1.2.1

works great with v1.11 though.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News