Mobile menu open/closed javascript

Hi there,

Sorry - I don't quite understand the question and requirement here.

Sounds like it would require a custom solution. Do you have the javascript code already?

I am triggering javascript when opening the Mobile Menu. Likewise, I want to trigger something else while closing it. I hope I was descriptive. Thanks.

document.addEventListener( 'click', function( evt ) {
var openedMenu = openedMenu = document.querySelector( '.toggled .menu-toggle' ),
targetElement = evt.target; // clicked element
console.log("menü");
$("body").addClass('overflow_hidden');

console.info('disableBodyScrollButton');
bodyScrollLock.disableBodyScroll(document.querySelector('.main-nav'));
} );

Sounds like you just need to create your own custom button for it?

GP's mobile menu button is triggered by the mobile-toggle class.

Is there an expert who can give the class to trigger open/close with mobile-toggle?

Hi there,

GP toggles the mobile-menu-open class on the HTML element. You can use a MutationObserver to look for that change. See here for an example:

const elemHtml = document.querySelector('html')
const mutateOptions = {
  attributes: true
}

function callback(mutationList, observer) {
  mutationList.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // handle class change
      if (mutation.target.className == 'mobile-menu-open') {
          console.log('menu open');
      } else {
          console.log('menu closed');
      }
    }
  })
}

const observer = new MutationObserver(callback)
observer.observe(elemHtml, mutateOptions)

Thanks for the answer. when clicked
I'm getting a "menu closed" log. The "menu open" log is never available.

Are you using the Off Canvas panel?

If so then you need to check for this class:

slide-opened

eg.

if (mutation.target.className == 'slide-opened') {

no I am not using Off Canvas panel.

Can you share a link to the site ?

thanks. Worked.

Glad to hear that!