Открытие/закрытие меню при наведении на чистом js

Question

Получилось так, что элементы меню имеют особое подчеркивание (которое можно реализовать только используя position: rel/abs) и элементы на after, а subMenu должно быть во всю ширину экрана и я не нашла другого выхода как реализовывать его при помощи js. Мое MegaMenu находиться после header. И я хочу сделать, чтобы при наведении на пункт меню с классом menu-toggle, MegaMenu менял свой display.

HTML - внутри определенная структура структура

<div class="header__mega-menu">...</div>

Меню, которое с классом menu-toggle

<nav class="header__nav">
      <ul class="header__menu">
        <li><a href="#">Home</a></li>
        <li class="menu-toggle"><a href="#">Catalog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

JS - вот тут не получается. Не знаю как написать, чтобы меню показывалось при наведении на menu-toggle и не исчезало как только я убираю курсор с ссылки, а й отображалось когда курсор перешел в выпадающее меню, то-есть в развернутом MegaMenu ??? Как объединить эти 2 события?

const menuItem = document.querySelectorAll('.menu-toggle');
const megaMenu = document.querySelector('.header__mega-menu');

Array.from(menuItem).forEach(item => {
  item.addEventListener('mouseenter', showSub);
  item.addEventListener('mouseleave', hideSub);
});

function showSub () {
  megaMenu.style.display = 'block';
}

function hideSub () {
  megaMenu.style.display = 'none';
}

Answer 1

У MouseEvent`ов есть свойство relatedTarget, которое возвращает элемент на который был переведен курсор. Это поможет если на пути между '.menu-toggle' и '.header__mega-menu' нет сторонних элементов. Пользуясь этим свойством ваш код выглядел бы вот так:

function hideSub (event) {
  //relatedTarget может быть равен null
  const { relatedTarget = {}} = event;

  if (relatedTarget.className !== 'header__mega-menu') {
    megaMenu.style.display = 'none';
  }
}

БЛОГ НА HUSL

Открытие/закрытие меню при наведении на чистом js

Ответы (1 шт):