Elegant Menu Mootools Plugin

April 4th, 2008 in scripts  |  7 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 , , , , . You can follow any responses to this entry through the RSS 2.0 feed.

7 Responses to “Elegant Menu Mootools Plugin”

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

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

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

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

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

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

  1. chromaSYNTHETIC Journal » Blog Archive » Flash Without Flash: Elegant Menu Fly-out
    Pingback on April 4th, 2008 at 3:41 pm

Leave a Reply