Скролл меню при фиксированом хедере

Код 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;
 }

 

Теги:
Содержимое
Вам может быть интересно

Скрол к блоку на странице (без перекрытия)

Маска на поле телефон

Форма Elementor

Let's work together!