Код JavaScript
document.addEventListener('DOMContentLoaded', function() {
// Функция для обработки наведения и ухода
function handleMenuHover(event) {
// Получаем текущий элемент, на который наведено
const menuItem = event.currentTarget;
// Проверяем, есть ли у элемента подменю
const submenu = menuItem.querySelector('.sub-menu');
if (submenu) {
// Добавляем класс родительскому ul
const parentUl = menuItem.closest('.sub-menu');
if (parentUl) {
parentUl.classList.add('over-v');
}
// Добавляем класс дочернему подменю
submenu.classList.add('over-a');
}
}
function handleMenuMouseLeave(event) {
// Получаем текущий элемент, с которого ушли
const menuItem = event.currentTarget;
// Проверяем, есть ли у элемента подменю
const submenu = menuItem.querySelector('.sub-menu');
if (submenu) {
// Убираем класс у родительского ul
const parentUl = menuItem.closest('.sub-menu');
if (parentUl) {
parentUl.classList.remove('over-v');
}
// Убираем класс у дочернего подменю
submenu.classList.remove('over-a');
}
}
// Находим все элементы li с подменю
function addEventListeners(menuItems) {
menuItems.forEach(menuItem => {
// Проверяем, есть ли у элемента подменю
const submenu = menuItem.querySelector('.sub-menu');
if (submenu) {
menuItem.addEventListener('mouseenter', handleMenuHover);
menuItem.addEventListener('mouseleave', handleMenuMouseLeave);
// Рекурсивно обрабатываем вложенные подменю
addEventListeners(submenu.querySelectorAll('li'));
}
});
}
// Инициализация обработки для первого уровня меню
addEventListeners(document.querySelectorAll('.menu > li'));
});
Css
.sub-menu.over-a {
max-height: 60vh;
overflow-y: auto;
}
.menu>li>.sub-menu{
max-height: calc(100vh - 150px);
}
.sub-menu.over-a.over-v {
max-height: fit-content;
overflow-y: unset;
}