Dedect if webflow menu is open by custom code

[Siton_Systems (Ezra Siton)]

The problem:

• No API to dedect menu events (open/close).

Some use cases:

• Run some gsap animation when the menu is open/close.
• Change styles/class of elements when the menu is open/close.

The code idea:

• By MutationObserver check the status of Webflow deafult hamburger menu (When is open aria-expanded = true / close false).

The code

  const observer = new MutationObserver(mutations => {
    // There could be one or more mutations so one way to access them is with a loop.
    mutations.forEach(record => {
      // In each iteration an individual mutation can be accessed.
      // In this case if the type of mutation is of attribute run the following block.
      // A mutation could have several types.

      // Stage ONE - "the menu start open"
      if(record.attributeName == 'class' && record.target.ariaExpanded == "false"){
        console.log("menu `start` open");
        run_when_webflow_menu_is_OPEN();
      }
      if(record.attributeName == 'class' && record.target.ariaExpanded == "true"){
        console.log("menu `start` close");
        run_when_webflow_menu_is_CLOSE();
      }

      // Stage Two - "the menu start opened"
      if(record.type === 'attributes') {
        const changedAttrName  = record.attributeName;
        const newValue = record.target.getAttribute(changedAttrName);

        if(changedAttrName == "aria-expanded" && newValue == "true"){
          console.log("menu is open");
          run_when_webflow_menu_is_OPEN();

        }// end menu if open
        if(changedAttrName == "aria-expanded" && newValue == "false"){
          console.log("menu is close");
          run_when_webflow_menu_is_CLOSE();
        }// end menu if close
      }
    });
  });


  // A list to be used as a target below.
  const webflow_menu_btn_status = document.querySelector(".w-nav-button");
  // This is the code that tells MutationObserver what to keep an eye on.
  // In this case it is the list targeted earlier and
  // it will only observe changes to attributes of the elements such as class, id or any other attribute.
  observer.observe(webflow_menu_btn_status, {
    attributes: true
  });

  // YOUR CUSTOM CODE

  // when open
  function run_when_webflow_menu_is_OPEN(){
    // do something
  }

  // when close
  function run_when_webflow_menu_is_CLOSE(){
    // do something
  }

Without code - use webflow interactions: