JQuery mmenu plugin doesnt zoom when opening the menu, but zooms when closing the menu

Question

I would like to zoom left up menu open and close. I added:

$('nav#menu').mmenu({
     classes: 'mm-zoom-menu',
});

But the menu only zooms when closing, but not when it first opens. Has anyone run across this before, or recognize what the problem may be?

Answer 1

I noticed this behavior on webkit browsers, FireFox zooms both when opening and closing. This is probably due to the classnames "mm-zoom-menu", "mm-opened" and "mm-opening" being added to the HTML-node at the same time.

If all your menus on the page are using the zoom effect, you could try to add this to your CSS:

html .mm-menu {
    -webkit-transform: scale(0.7, 0.7) translateX(-40%);
    -moz-transform: scale(0.7, 0.7) translateX(-40%);
    -ms-transform: scale(0.7, 0.7) translateX(-40%);
    -o-transform: scale(0.7, 0.7) translateX(-40%);
    transform: scale(0.7, 0.7) translateX(-40%);

    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}

(this is what is in the effects-css file in the selector "html.mm-zoom-menu.mm-opened .mm-menu").