Multi Level JavaScript Menu

multilevel.js

document.addEventListener('DOMContentLoaded', function() {
  // Add class on parent which 'li' children has submenu
  Array.prototype.forEach.call(document.querySelectorAll('ul.submenu'), function(el) {
    el.parentElement.classList.add('megamenu');
  });

  //Menu ICon Append prepend for responsive
  window.addEventListener('resize', function() {
    if (window.innerWidth < 1024) {
      if (!document.getElementById('menu_trigger')) {
        document.getElementById('mainmenu').insertAdjacentHTML('afterbegin', '<a href="#" id="menu_trigger" class="menulines-button"><span class="menulines"></span></a>');
      }
      Array.prototype.forEach.call(document.querySelectorAll('.megamenu > a'), function(el) {
        if (!el.querySelector('.navtrigger')) {
          el.insertAdjacentHTML('beforeend', '<span class="navtrigger"></span>')
        }
      });
      if (!document.querySelector('.mobile-menu')) {
        document.querySelector('.menu').outerHTML = '<div class="mobile-menu">' + document.querySelector('.menu').outerHTML + '</div>';
      }
      Array.prototype.forEach.call(document.querySelectorAll('.submenu'), function(el) {
        if (!el.querySelector('.backmenu-row')) {
          var subvalue = el.previousElementSibling.textContent;
          el.insertAdjacentHTML('afterbegin', '<div class="backmenu-row"><a href="#" class="back-trigger"></a><em>' + subvalue + '</em></div>');
        }
      });
    } else {
      var menuTrigger = document.getElementById('menu_trigger');
      if (menuTrigger) menuTrigger.remove();
      Array.prototype.forEach.call(document.querySelectorAll('.navtrigger'), function(el) {
        el.remove();
      });
      var menuWrapper = document.querySelector('.menu').parentNode;
      if (menuWrapper && menuWrapper.classList.contains('mobile-menu')) {
        menuWrapper.outerHTML = menuWrapper.innerHTML;
      }
      Array.prototype.forEach.call(document.querySelectorAll('.back-trigger'), function(el) {
        el.remove();
      });
    }
  });
  window.dispatchEvent(new Event('resize'));

  // Mobile menu on click open
  document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'menu_trigger') {
      var megaMenu = document.querySelector('.megamenu');
      var mobileMenu = document.querySelector('.mobile-menu');
      var menuTrigger = document.getElementById('menu_trigger');
      if (megaMenu && megaMenu.classList.contains('sub-open')) {
        megaMenu.classList.remove('sub-open');
        if(mobileMenu) mobileMenu.style.display = 'none';
        menuTrigger.classList.toggle('menuopen');
      } else {
        menuTrigger.classList.toggle('menuopen');
        if(mobileMenu) mobileMenu.style.display = 'block';
      }
      e.preventDefault();
    } else if (e.target && e.target.classList.contains('navtrigger')) {
      // While open submenu add class
      e.target.closest('li').classList.add('sub-open');
      e.preventDefault();
    } else if (e.target && e.target.classList.contains('back-trigger')) {
      // Back to menu in mobile
      e.target.closest('li').classList.remove('sub-open');
      e.preventDefault();
    }
  });
});