Drop down меню

Drop down меню можно сделать и без JavaScript, а только при помощи CSS. Собственно с помощью :hover. Но у меню на JavaScript есть свои преимущества. Самое главное - это задержка.

Рассмотрим меню с одним уровнем вложенности. Код будем писать с помощью jQuery.

HTML

<ul class="nav">
	<li>
		<a href="#">Пункт 1</a>
		<ul>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт 2</a>
		<ul>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Пункт 3</a>
		<ul>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</a></li>
			<li><a href="#">Подпункт</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); //установим задержку 200 мс
        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);
    });
})();

Вложенные пункты меню должны быть скрыты с помощью CSS

CSS

ul.nav li ul{
	display: none;
}

Демо

Share: