Drop down menu

20.04.19

Drop down menu can be done without JavaScript, only with the help of CSS. With :hover. But the JavaScript menu has its advantages. The most important thing is the delay.

Consider a menu with one level of nesting. We will write the code using 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>

JS

(function(){
    var itemMenu = $('ul.nav > li'),
        close,
        flag;
 
    function closeLinks(that){
        close = setTimeout(function(){
            $(that).find('ul').stop().fadeOut();
        }, 200); //set delay 200 ms
        flag = that;
    }
 
    itemMenu.on('mouseenter', function(){
        if(flag === this){
            clearTimeout(close);
        }
        $(this).find('ul').stop().fadeIn();
    });
 
    itemMenu.on('mouseleave', function(){
        var self = this;
        closeLinks(self);
    });
})();

Nested menu items should be hidden using CSS

CSS

ul.nav li ul{
    display: none;
}
blog comments powered by Disqus