Friday, June 26, 2015

How to detect jQuery mmenu close event

A few days ago, I was trying jQuery mmenu. I had a close button (called #mmenu-btn) that changed shape between open and close states and I wanted to make sure that it will never get stuck in a state different than the desired one.

    

After some reading in the mmenu docs about events and configurations, and after playing a lot with the button and mmenu on desktop and mobile, I had two states to cover:
1- An event is triggered by code (mmenu API): In this case, it is my code, so I can handle it.
2- The user clicks/touches the part outside the mmenu. In this case, the mmenu does not tell me that it is closing now.

For the second case, I found a nice solution that depends on how mmenu works. When mmenu opens, there is a created overlay called #mm-blocker that covers the part outside the menu. When this overlay is clicked, the mmenu is closed. So what I did was to bind the click event (and other similar events) of this #mm-blocker and do whatever I want to change the state of my close button.

// if user clicks outside the mmenu, change the state of mmenu-btn
$('#mm-blocker').on('click mousedown touchstart', function() {
  $('#mmenu-btn').removeClass('close');
});

This was my little trick. I hope it helps.

2 comments:

  1. Thanks a lot, I made something similar but it didn't work for me, because I didn't think of the 3 states. Thanks! you made my day!

    ReplyDelete
    Replies
    1. Thanks for letting me know. I'm glad I could help.

      Delete