Trigger a closing function in mmenu

Question

I've been trying to create a button that animates when the menu opens and closes. To do this I created a simple function to execute API.open(); and API.close(); when the button is clicked. Code:

var API = $("#primary-menu").data( "mmenu" ),
      menuOpen = 0;

  $("#menu-button").click(function() {
    if(menuOpen === 0){
      API.open();
      menuOpen = 1;
    }
    else{
      API.close();
      menuOpen = 0;
    }
  });

Now the problem is the button doesn't animate when the menu closes by clicking on the content area

$(".mm-opening #mm-0").click(function(){
    console.log("Click Successful");
    $("#menu-button").removeClass("close");
  });

Using the console.log method and dev tools, I found out the the click is not at all registered when I click in the content area, so I cannot animate the icon.

Here's the demo: http://bwdmedia.in/camelport/vendor-panel/ Can someone explain the reason for this? Or another way to achieve the same result.

I think a good solution would be if someone could go through `jquery.mmenu.min.js` file and figure out where exactly is the code located that triggers the open and close of the menu. I went through it but couldn't understand. — Whip, Sep 07 '15 at 10:26

score 2 · Answer 1 · answered Aug 20 '17 at 19:15

You could get an animated Hamburger added by following the steps mentioned below

The icon

First, head on over to this amazing collection of animated hamburger icons, download the CSS and follow the instructions. You should now have HTML looking something like this:

<button id="my-icon" class="hamburger hamburger--collapse" type="button">
   <span class="hamburger-box">
      <span class="hamburger-inner"></span>
   </span>
</button>

If you need your hamburger icon to be fixed, try wrapping it in a DIV and use the fixedElements add-on.

<div class="Fixed">
   <button id="my-icon" class="hamburger hamburger--collapse" type="button">
      <span class="hamburger-box">
         <span class="hamburger-inner"></span>
      </span>
   </button>
</div>

The menu

Second (and last), create the menu and use the API to open the menu and to animate the icon. Add a small timeout to ensure the rest of the page is finished animating for a smoother animation.

var $menu = $("#my-menu").mmenu({
   //   options
});
var $icon = $("#my-icon");
var API = $menu.data( "mmenu" );

$icon.on( "click", function() {
   API.open();
});

API.bind( "open:finish", function() {
   setTimeout(function() {
      $icon.addClass( "is-active" );
   }, 100);
});
API.bind( "close:finish", function() {
   setTimeout(function() {
      $icon.removeClass( "is-active" );
   }, 100);
});

http://mmenu.frebsite.nl/tutorials/animated-hamburger.html

score 0 · Answer 2 · answered Sep 24 '15 at 21:52

mmenu add a class on html tag .mm-opened when menu is triggered and remove it when its close, so you can set a interval to watch if html tag has this class

if you are using JQuery you can do something like this.

var thread = setInterval(checkHtmlTag(),20)

    function checkHtmlTag (){
     var menuOpen;

     if ($("html").hasClass("mm-opened")){
      menuOpen = true
     } else{
       menuOpen = false
       }
    }

score 0 · Accepted Answer · answered Oct 08 '15 at 14:37

0

Well thanks to the GitHub community, I found the solution.

There's a div with id #mm-blocker which prevents interaction with the page so I turned it off with display:none; and the clicks can be registered by javascript now.

answered Oct 08 '15 at 14:37

Whip

1,891
22
43

Trigger a closing function in mmenu

3 Answers3