Неправильный эффект меню jQuery - PullRequest
Новая
       20

Неправильный эффект меню jQuery

0 голосов
/ 12 мая 2011

Я ищу способ исчезновения подменю в упорядоченной по списку навигации, поскольку я хочу, чтобы оно исчезало:

Всегда есть активный пункт меню - и если активный пункт меню находится в подменю- также активный родительский пункт меню.Таким образом, при инициализации должно быть видно подменю с активным текущим элементом или текущим родительским элементом.Если я наведу на другой пункт меню, его подменю исчезнет, ​​активный исчезнет.После выхода из всего меню активное подменю снова исчезает.Кроме того, я использовал плагин jQuery hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), чтобы указать время ожидания для каждого действия при наведении курсора. Это то, что я получил до сих пор, но оно действительно содержит ошибки. По некоторым причинам подменю иногда просто полностью исчезают, даже при наведении курсора на два элемента.не выходя из навигации, два подменю перекрываются. У кого-нибудь есть идея или совет для меня? =) Пожалуйста, посмотрите демо ЗДЕСЬ: http://jsfiddle.net/BQuPz/

Ответы [ 2 ]

2 голосов
/ 13 мая 2011

Проблемы с CSS: Лучше не играть с display:none и opacity самостоятельно, оставьте это на усмотрение jQuery и используйте соответствующие функции для fadeIn() и fadeOut().

Вместо того, чтобы помещать display:block; float:left; в элементы меню <li>, вы должны использовать display:inline-block. Если вы перемещаете <li> s, это фактически вырывает их из родительского контейнера, оставляя ul с нулевым размером, поэтому невозможно прослушивать события mouseleave, если вы явно не установите его размер.

Проблемы с кодом: В плагине hoverIntent timeout может быть не тем, что вы ищете. Тайм-аут автоматически запускает событие out через определенное время. Чтобы отложить эффект наведения, используйте sensitivity и interval. Посетите страницу документации .

Если вы примените вышеупомянутые исправления, единственными необходимыми событиями являются hoverIntent over и отпускание мыши основной навигации. Событие over исчезает в текущем подменю и затемняет остальные, mouseleave исчезает в активном подменю, когда пользователь выключает навигацию. Посмотрите на вашу модифицированную демоверсию jsfiddle: http://jsfiddle.net/BQuPz/4/

// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();

// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
    over: function(){
        // Find the hovered menu's sub-menu
        var $submenu = $(this).find('.sub-menu');

        // Stop the animation and fade out the other submenus
        $('.sub-menu').not($submenu).stop(true,true).fadeOut(260);

        // Fade in the current one
        $submenu.fadeIn(260);
    }
});

// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
    // Fade out all inactive submenus
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);

    // Fade in the active one
    $('.current-menu-parent .sub-menu').fadeIn(260);
});
0 голосов
/ 13 мая 2011

Вместо использования анимации в $(this).find("ul").animate({'opacity': '1'}, 250); Я бы использовал функции fadeIn и fadeOut с обратными вызовами. Тогда вы уверены, что ваша анимация fadeIn начинается после окончания fadeout 

element.fadeOut(250,function(){otherElement.fadeIn(250)})
...