Search code examples
drop-down-menumootoolsdelay

How to add .delay in Mootools dropdown menu script


I have Joomla 2.5 site with Rockettheme RokNavMenu module for dropdown navigation. It's a great & free module based on Mootools with many options, but it lacks an option for delaying of dropdown subitems display. Problem is that dropdown navigation is not on the top of the page and many users are accidentally triggering dropdowns when they are hovering with mouse cursor over this element.

So I tried to add .delay() in various places in the dropdown menu JS code, but the script is very complex and I had no success.

You can see fusion.source.js here (direct link to js file): http://bit.ly/12UHbAX

Menu options are triggered with this code:

window.addEvent('domready', function() {
    new Fusion('ul.menutop', {
        pill: 0,
        effect: 'slide and fade',
        opacity:  1,
        hideDelay:  250,
        centered:  0,
        tweakInitial: {'x': -8, 'y': -10},
        tweakSubsequent: {'x':  -8, 'y':  -11},
        tweakSizes: {'width': 18, 'height': 20},
        menuFx: {duration:  300, transition: Fx.Transitions.Circ.easeOut},
        pillFx: {duration:  400, transition: Fx.Transitions.Back.easeOut}
    });
});

I would really appreciate help with this, I've read many topics on stackoverflow.com, but all the solutions I've found would require large rewrite of the JS code.

Regards


Solution

  • To do what you want I suggest some changes in the script (fusion .js file) and a CSS fix also. Let me know if you can find and fix this things.

    1st - what you are looking for is:

    this.myEffect.start().chain(function (e) {
        this.start.delay(100, this)
    }).start({
        "margin-top": 0,
        opacity: this.options.opacity
    }).chain(function () {
        this.showSubMenuComplete();
    }.bind(this));
    

    This goes in line 684 of the posted script in the else statement.

    2nd - the script is not ready for this delay, so there is a border-shadow in .fusion-submenu-wrapper CSS that has to be fixed.

    3rd - replace the hideDelay to a shorter value to 500 for example. Line 21 of the posted script.

    4th (last but not least!) - change the option link to chain. Line 226 of the posted script.