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

Question

[Дарт Вейдер]

Здравствуйте.
Помогите пожалуйста реализовать всплывающие меню с задержкой, понимаю, что надо делать на 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 не понимаю ничего.

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

Answer 1

[Eugene Tatarinov]

Как только на кнопку наведен курсор через 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]);
        }
    }
);

Попробуйте.

Answer 2

[Виталий Кузнецов]

Может быть кому-то будет актуально сейчас

var hoverTimeout;
$('.categoryNavMenu > li.item').hover(
    function () {
        var _this = $(this);

        hoverTimeout = setTimeout(function () {
            _this.addClass('hover');
            _this.find("ul:first").addClass('hover');
        }, 500);
    },
    function () {
        //Скрываем меню
        $(this).removeClass('hover');
        $(this).find("ul:first").removeClass('hover');

        clearTimeout(hoverTimeout);
    }
);

Answer 3

[Александр Зубарев]

Если нужна задержка на css, то есть свойство transition-delay
А на JS setTimeout

т.е, если пользователь убрал курсор мышки с элемента меню, то она не появилось.

Как мне кажется можно сделать все на css:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property:  opacity, visibility;   /* Задаем какие свойства анимировать */
    transition-duration: .3s, .3s;               /* Задаем продолжительность анимации для каждого свойства */
    transition-delay: .15s, .15s;                /* Задаем задержку анимации для каждого свойства */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Comments

[Дарт Вейдер]

а можете показать как реализовать правильно, если Вас не затруднит то тут codepen.io/anon/pen/OygyWy

На JS я делал еще так, не знаю на сколько правильно, но не работало почему-то

[Дарт Вейдер]

Сейчас попробую Ваш код CSS

[Дарт Вейдер]

Попробовал, работает, но не так как нужно(
Например, если навести на элемент меню и отвести курсор вниз, то все равно меню срабатывает

[Александр Зубарев]

Должен работать, попробуй задержку побольше, например transition-delay: 1s, 1s;
вот на вашем примере сделал задержку, да там кривовато, но задержка видна и если отвести от пункта меню то меню не выпадает codepen.io/anon/pen/PPjPVb

[Александр Зубарев]

Если что затронул только два класса:
.header_menu #menu-short-complete3 .clrfix:hover > ul
#menu-short-complete3 ul