[Resolved] Mobile menu open/closed javascript

Home Forums Support [Resolved] Mobile menu open/closed javascript

Home Forums Support Mobile menu open/closed javascript

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2001133
    onalti

    I want to trigger different javascript actions on mobile menu opening and closing. I hope I asked correctly.
    Can you help me.

    #2001966
    Leo
    Staff
    Customer Support

    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?

    #2003225
    onalti

    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’));
    } );

    #2003397
    Leo
    Staff
    Customer Support

    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.

    #2003999
    onalti

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

    #2004072
    David
    Staff
    Customer Support

    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)
    #2004088
    onalti

    Thanks for the answer. when clicked
    I’m getting a “menu closed” log. The “menu open” log is never available.

    #2004090
    David
    Staff
    Customer Support

    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') {

    #2005483
    onalti

    no I am not using Off Canvas panel.

    #2005601
    David
    Staff
    Customer Support

    Can you share a link to the site ?

    #2022297
    onalti

    thanks. Worked.

    #2023174
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.