Drop down меню (jQuery)

Drop down меню можна створити без JavaScript, лише використовуючи CSS. За допомогою :hover. Але меню JavaScript має свої переваги. Найголовніше – це затримка зникнення випадаючих елементів.

Розглянемо просте меню з одним рівнем вкладеності. Ми напишемо код за допомогою jQuery. Хоча jQuery не є найсучаснішим інструментом, ця бібліотека продовжує використовуватися в багатьох проектах.

HTML

<ul class="nav">
    <li>
        <a href="#">Item 1</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 2</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Item 3</a>
        <ul>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
            <li><a href="#">Subitem</a></li>
        </ul>
    </li>
</ul>

JavaScript

(() => {
    const itemMenu = $('.nav > li');
    let close, flag;

    itemMenu.on('mouseenter', function() {
        if (flag === this) {
            clearTimeout(close);
        }
        $(this).find('ul').stop().fadeIn();
    });

    itemMenu.on('mouseleave', function() {

        close = setTimeout(() => {
            $(this).find('ul').stop().fadeOut();
        }, 300); //set delay 300 ms

        flag = this;
    });
})();

Вкладені пункти меню слід приховати за допомогою CSS

CSS

.nav li ul {
    display: none;
}

Ви можете самостійно написати інші необхідні стилі залежно від вашого дизайну. Ви можете побачити приклад того, як може виглядати та працювати меню на Codepen: https://codepen.io/igorrybalko/pen/XJrparJ