Как сделать появление всплывающего меню с задержкой при наведении?

Question

Дарт Вейдер @blackdarthvader

Только учусь кодить ^_^

JavaScript

Как сделать появление всплывающего меню с задержкой при наведении?

Здравствуйте.
Помогите пожалуйста реализовать всплывающие меню с задержкой, понимаю, что надо делать на JS, так как меню содержит очень много элементов, делал на css, для примера приведу код css, классы тут правда другие, но суть Вы должны понять.

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition: all .3s ease .15s; /* Добавляем анимацию 0.3 сек. и задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Так вот, почему на JS и почему вариант на CSS не подошел, проблема в том, что пользователь иногда случайно наводит на элемент меню и оно естественно появляется, а на JS как я понимаю можно учесть этот момент, т.е, если пользователь убрал курсор мышки с элемента меню, то она не появилось.

P.s. надеюсь, что я никого не запутал

Пример на codepen.io

Гуглил, пытался сделать, но ничего не вышло, так как в JS не понимаю ничего.

Хотелось бы сделать как тут Пример

Вопрос задан более трёх лет назад
10482 просмотра

Комментировать

Подписаться 3 Простой Комментировать

Answer 1 · 2015-10-08 15:17:20

Как только на кнопку наведен курсор через setTimeout запускаем отсчет до появления меню, если курсор уведен с кнопки, то отменяем таймаут через clearTimeout.

var timesArray = [];

$('.menu').hover(
    function()
    {
        var id = jQuery.data(this);
        timesArray[id] = setTimeout(function() {
            //Показываем меню
            $(this).css({'display' :  'block'});
            timesArray[id] = "";
        }, 500);
    },
    function()
    {
        var id = jQuery.data(this);
        //Скрываем меню
        $(this).css({'display' :  'none'});
        if (timesArray[id])
        {
            clearTimeout(timesArray[id]);
        }
    }
);

Попробуйте.

Как сделать появление всплывающего меню с задержкой при наведении?

Войдите на сайт