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

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

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

Хотелось бы сделать как тут Пример
  • Вопрос задан
  • 8436 просмотров
Решения вопроса 2
darkkemper
@darkkemper
Programmer / Software Developer
Как только на кнопку наведен курсор через 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]);
        }
    }
);


Попробуйте.
Ответ написан
Комментировать
vitaly44
@vitaly44
Предприниматель, веб-разработчик, дизайнер
Может быть кому-то будет актуально сейчас

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);
    }
);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
zualex
@zualex
Senior Software Engineer
Если нужна задержка на 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;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы