Elegant Menu Mootools Plugin

April 4th, 2008 in scripts  |  4 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.

4 Responses to “Elegant Menu Mootools Plugin”

  1. Marc

    July 9th, 2008 at 3:44 am

    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

    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

    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!

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

Leave a Reply