Получилось так, что элементы меню имеют особое подчеркивание (которое можно реализовать только используя 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';
}