javascriptjquerycssclassmmenu

Mmenu - How do I detect the closed call back event?


I am using the Jquery Mmenu plugin and I want to detect when the closed call back event occurs so I can remove a css class from my burger menu. I have the same burger menu icon that opens and closes the menu, I am adding an is-active class when the menu opens but I need to detect when the whole menu has closed so I can remove the class and I can't seem to figure it out.

This is what I have so far:

document.addEventListener(
    "DOMContentLoaded", () => {
        const menu = new Mmenu( "#mobile-menu", {
            "extensions": [
                "position-front"
            ],
            scrollBugFix: {
                fix: true
            },
    });
    const api = menu.API;
    const hamburger = document.querySelector('.hamburger');

    hamburger.addEventListener(
       "click", ( evnt ) => {
           evnt.preventDefault();
           hamburger.classList.add("is-active");
     });
    }
);


  [1]: https://mmenujs.com/

Solution

  • I found the answer to my question in the comments on this question: Callback event when jQuery 'mmenu' opened

    Adding:

    // When the open callback event is fired bind to it and add the class
    api.bind('open:after', function (){
        hamburger.classList.add('is-active');
        console.log('open')
    })
    
    // When the closed callback event is fired bind to it and remove the class
    api.bind('close:after', function(){
        hamburger.classList.remove("is-active");
        console.log('closed')
    })
    
    The documentation for the plugin is good but not that great so I struggled for a while before seeing this. Maybe it can help someone else.
    
    I am using the latest version of the plugin and that is 8 something.