chromasynthetic » Blog Archive » Elegant Menu Mootools Plugin

Elegant Menu Mootools Plugin

April 4th, 2008 in scripts | 11 Comments

If you didn’t want to follow along in my elegant menu tutorial, then you’re in luck. I made it into a Mootools plugin. You can try out the demo or download it (script and css). ~~This plugin is built to work with Mootools 1.2b2.~~ This plugin has been updated to work with Mootools 1.2.

New features include automagic calculation of widths so you no longer need to define them in the css if you don’t want to. Additionally, you can attach your own events when the menus are shown and hidden, and it’s easier to change the speed of the animation (sorry, you can’t change the type). The css file is also organized a lot better, allowing you to located exactly what you can and can’t change.

Here are some examples that detail your options:

// default usage
new EMenu('id_of_container');
 
// change speed of animation
new EMenu('id_of_container', {image_speed: 600, menu_speed: 600}
 
// attach custom event and disable autocalculation
new EMenu('id_of_container', {onMenuShow: yourFunction, onMenuHide: yourOtherFunction, autocalc: false}
 
function yourFunction(el) {
    // do something cool
    // note: this function receives the LI element that is moused over
}

Enjoy!

This entry was posted on Friday, April 4th, 2008 at 3:38 pm and is filed under scripts and tagged with 12b2, fade, menu, mootools, plugin. You can follow any responses to this entry through the RSS 2.0 feed.

11 Responses to “Elegant Menu Mootools Plugin”

Marc
July 9th, 2008 at 3:44 am | reply
Hi, would it be possible to update the plugin for mootools 1.2 final? There are some changes like

old: img_opacity.start(0.5);

new: img_opacity.start(’opacity’, 0.5);

and I couldn`t figure out a problem with the menus staying open when hovering fast the main menu entries. This doesn`t occur in the 1.2.beta. Very strange….

Thx for taking a look!
Chris
July 9th, 2008 at 5:41 am | reply
Ok, done.

I didn’t experience the menu staying open, though. What browser were you using?
Marc
July 9th, 2008 at 6:36 am | reply
Thank you very much! I made a mistake when declaring the vars. I changed it like in my post above. But then the problem occurs.

img_opacity = new Fx.Tween(menu.getElement(’.menu_content’),{
property: ‘opacity’,
link: ‘cancel’,
duration: this.options.image_speed
});

did the trick.

I had

img_opacity = new Fx.Tween(menu.getElement(’.menu_content’), ‘opacity’, {
link: ‘cancel’,
duration: this.options.image_speed
});

It is difficult to learn these things when the (old) mootools forum is down.

Thank you very much!
CW
October 14th, 2008 at 4:27 am | reply
Great Plugin Chris!

I’m looking to replace the background image with a swf. When I do this the drop down menus appear behind the swf. Any ideas how to reverse this?

Thanks
Chris
October 14th, 2008 at 7:00 am | reply
CW,

I don’t believe it’s possible to overlay regular html on Flash. You’ll probably just have to make the whole menu Flash if you want that effect. Better Google it just to make sure.
CW
October 14th, 2008 at 7:17 am | reply
Thanks Chris.

My swf file was an xml driven image/banner rotator I developed for another site.

I may try and use Jonathan Schemoul’s SmoothGallery with your plugin instead. I think it uses a different version of mootools to your plugin so it may take a bit of tweaking to get working.

Thanks again.
Sam
February 12th, 2009 at 4:41 am | reply
First off this is a nice script.

However I am trying to get the menu the stay open for a second or two once the mouse leaves the menu.

It’s useful if a user accidentally slips off the list. But I’m having very little joy implementing.
Chris
February 12th, 2009 at 6:59 am | reply
Sam,

You’ll just have to add a delay on mouseout that closes the menu a little later if the mouse is still not over the menu.
Tim
June 21st, 2009 at 1:34 pm | reply
is the demo down? ff3 windows vista
Chris
June 22nd, 2009 at 6:25 am | reply
Tim, you’re right. Mootools changed a path on me. Should be good to go now, though.