Question

I have an html5 page with a dropdown menu using mootools. It’s working if I use the hide() and show() functions. But, I want the menu’s to slide in and out, like this:

var m        = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");

if (e.hasClass('active')) {

    m.hide();
    e.removeClass('active');

} else {

    m.show();
    e.addClass('active');
}

Instead of hide and show I want slideIn and slideOut:

var m    = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {

    m.slideOut();
    e.removeClass('active');

} else {

    m.slideIn();
    e.addClass('active');
}

Working example: http://jsfiddle.net/wzzeZ/

Not working: http://jsfiddle.net/37V53/1/

It’s not throwing errors; where do I look to fix it?

Answer 1

There are a few things going on here.

First of all, you’re not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.

It’s a style issue that’s preventing the menus from displaying.

The FX.Slide Class in Mootools doesn’t seem to explicitly set the ‘display’ property of the element you’re sliding to block. You still need to call .show() for it to work.

Next, if you check out the docs for FX.Slide, you’ll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)

Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element – but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it’s in the right place).

To see what I’m talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/

If you run that in Firefox with Firebug, and you hover your cursor over the element that’s logged to the console, you’ll see Firebug’s blue hilight appearing where your element actually is being displayed – in the middle of the window, and hidden from view.

This is a combination of assumptions made in the MooTools Classes you’re using working against each other; You’ll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.

I created a sample of how to do this based on the original Fiddle (that works) – http://jsfiddle.net/LkLgk/

Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.

Hope that points you in the right direction; remember, when in doubt, console.log everything!