Mobile menu toggle off click event

  • I wanted to add css when the menu is toggled and replace the css back when a user closes the menu

    document.querySelector(“.mega-menu-toggle”).addEventListener(‘click’, function() {
    document.querySelector(“body”).style.overflow = ‘hidden’;
    document.querySelector(“.av_one_full”).style.zIndex = “-1”;
    });

    I have used this and it works fine when I open the menu but when I close the menu it remains. Can u tell me hoe can i apply or target a queryselector for close event?

    I wanna use something like this

    document.querySelector(“.mega-menu-toggle-close”).addEventListener(‘click’, function() {
    document.querySelector(“body”).style.overflow = ‘visible’;
    document.querySelector(“.av_one_full”).style.zIndex = “1”;
    });

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi shhussain72,

    If you check line 579 and 605 you can see we the plugin triggers custom events when the mobile menu is opened and closed, so you should be able to utilise those:

    https://plugins.trac.www.ads-software.com/browser/megamenu/trunk/js/maxmegamenu.js

    Alternatively, you could modify your JavaScript to detect the presence (or lack of) a body class which is added only when the mobile menu is open (something like ‘mega-menu-primary-mobile-open’). You may need to add a short delay/timeout before checking for the class.

    Regards,
    Tom

    Thread Starter shhussain72

    (@shhussain72)

    I tried but failed. Can u give the correct script that will work

    if($(“body”).hasClass(“mega-menu-max_mega_menu_1-mobile-open”)){
    document.querySelector(“body”).style.overflow = ‘hidden’;
    document.querySelector(“.av_one_full”).style.zIndex = “-1”;

    } else{
    document.querySelector(“body”).style.overflow = ‘visible’;
    document.querySelector(“.av_one_full”).style.zIndex = “1”;
    }

    The reason I am doing this is because I have fullpage.js installed and I have added menu inside a fullpage div. Now when I click menu the other div content is overflowing the menu item. I have to make the other divs z-index ‘-1’ for the menu to be displayed top of the content. This is important and I need a solution

    • This reply was modified 4 years, 6 months ago by shhussain72.
    • This reply was modified 4 years, 6 months ago by shhussain72.
    Plugin Author megamenu

    (@megamenu)

    Hi shhussain72,

    I think you would need to put the code above into your click function:

    document.querySelector(“.mega-menu-toggle”).addEventListener(‘click’, function() {
    …. your code above, possibly within a 250ms ‘setTimeout’
    }

    If that doesn’t work then let me know where it is failing? add debug – does it detect the click, does it detect the class?

    Regards,
    Tom

    Thread Starter shhussain72

    (@shhussain72)

    Worked perfectly!

    For anyone need similar solution u can check for body event as mentioned above and use condition like below. In my situation the body event is “mega-menu-max_mega_menu_1-mobile-open”

    document.querySelector(".mega-menu-toggle").addEventListener('click', function() {
    
    setTimeout(function() {
if($("body").hasClass("mega-menu-max_mega_menu_1-mobile-open")){
document.querySelector("body").style.overflow = 'hidden';
document.querySelector("ANY SELECTOR ID OR CLASS").style.zIndex = "-1";

} else{
document.querySelector("body").style.overflow = 'visible';
document.querySelector("ANY SELECTOR ID OR CLASS").style.zIndex = "1";
}
}, 250);

});
    • This reply was modified 4 years, 6 months ago by shhussain72.
    • This reply was modified 4 years, 6 months ago by shhussain72.
    Thread Starter shhussain72

    (@shhussain72)

    I have common issue i.e, I have this mega menu in 4 sections of a page and as u know the event is working for 1st click and not on the rest. Can u tell me how can I loop this to make the event work for multiple sections with same class.

    jQuery(document).ready(function($){
    
    const breakdownButton = document.querySelectorAll('.mega-menu-toggle');
breakdownButton.forEach(function(item) {
    item.addEventListener('click', function() {
    
    setTimeout(function() {
            if($("body").hasClass("mega-menu-max_mega_menu_1-mobile-open")){
            document.querySelector("body").style.overflow = 'hidden';
            document.querySelector(".mega-hide").style.zIndex = "-1";
                        
            } else{
            document.querySelector("body").style.overflow = 'visible';
            document.querySelector(".mega-hide").style.zIndex = "1";
            }
            }, 250);

    });
});
});
    Plugin Author megamenu

    (@megamenu)

    Hi,

    I suspect you would need to check for multiple classes on the body tag, as you are only checking for one of the menus at the moment on this line:

    if($("body").hasClass("mega-menu-max_mega_menu_1-mobile-open")){

    Regards,
    Tom

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile menu toggle off click event’ is closed to new replies.