Advertisement
oscarviedma

Código funcionalidad JavaSscript OV Menu Mobile - OV DIVI

Sep 20th, 2024
704
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.79 KB | None | 1 0
  1. <script>
  2. document.addEventListener('DOMContentLoaded', function() {
  3.   const menuToggle = document.getElementById('ovMenuToggle');
  4.   const menuContainer = document.getElementById('ovMenuContainer');
  5.   const menuItems = menuContainer.querySelectorAll('.et-menu > li');
  6.   const allModules = menuContainer.querySelectorAll('.et_pb_module');
  7.   const subMenus = menuContainer.querySelectorAll('ul.sub-menu');
  8.  
  9.   menuContainer.querySelectorAll('.menu-item-has-children > a').forEach(function(link) {
  10.     if (!link.querySelector('.ov-submenu-indicator')) {
  11.       const arrowIcon = document.createElement('span');
  12.       arrowIcon.className = 'ov-submenu-indicator';
  13.       arrowIcon.innerHTML = ';';
  14.       link.appendChild(arrowIcon);
  15.     }
  16.   });
  17.  
  18.   menuToggle.addEventListener('click', function() {
  19.     this.classList.toggle('ov-open');
  20.     menuContainer.classList.toggle('ov-open');
  21.     document.body.classList.toggle('ov-menu-open');
  22.  
  23.     if (menuContainer.classList.contains('ov-open')) {
  24.       menuItems.forEach((item, index) => {
  25.         setTimeout(() => {
  26.           item.classList.add('ov-item-visible');
  27.         }, index * 100);
  28.       });
  29.  
  30.       allModules.forEach((item, index) => {
  31.         setTimeout(() => {
  32.           item.classList.add('ov-item-visible');
  33.         }, (menuItems.length + index) * 100);
  34.       });
  35.     } else {
  36.       menuItems.forEach((item) => {
  37.         item.classList.remove('ov-item-visible');
  38.       });
  39.  
  40.       allModules.forEach((item) => {
  41.         item.classList.remove('ov-item-visible');
  42.       });
  43.     }
  44.   });
  45.  
  46.   function toggleSubMenu(event) {
  47.     event.preventDefault();
  48.     event.stopPropagation();
  49.  
  50.     const menuItem = this.closest('.menu-item-has-children');
  51.     const subMenu = menuItem.querySelector('ul.sub-menu');
  52.     const link = menuItem.querySelector('a');
  53.  
  54.     if (subMenu) {
  55.       menuItem.classList.toggle('toggled');
  56.       link.classList.toggle('ov-submenu-open');
  57.       subMenu.classList.toggle('ov-submenu-visible');
  58.     }
  59.   }
  60.  
  61.   const menuItemsWithChildren = menuContainer.querySelectorAll('.menu-item-has-children');
  62.   menuItemsWithChildren.forEach(function(item) {
  63.     const link = item.querySelector('a');
  64.  
  65.     link.addEventListener('click', toggleSubMenu);
  66.     link.addEventListener('touchend', function(e) {
  67.       e.preventDefault();
  68.       toggleSubMenu.call(this, e);
  69.     });
  70.   });
  71.  
  72.   document.addEventListener('click', function(event) {
  73.     if (!event.target.closest('#ovMenuContainer')) {
  74.       subMenus.forEach(function(subMenu) {
  75.         subMenu.classList.remove('ov-submenu-visible');
  76.         subMenu.parentNode.classList.remove('toggled');
  77.         const link = subMenu.parentNode.querySelector('a');
  78.         if (link) {
  79.           link.classList.remove('ov-submenu-open');
  80.         }
  81.       });
  82.     }
  83.   });
  84. });
  85. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement