JQuery Hover Меню

Question

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

$ (документ) .ready (функция () { Nifty ("# ​​menu a", "маленький прозрачный верх"); Nifty («# outcontent», «средний нижний прозрачный»);

function hideSubMenu() {
    $("#sub-menu-content").fadeOut('slow');
    hideSubMenu.timeout = 0;
}

$('#menu a').hover(function() { //start function when any link is clicked
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
    hideSubMenu.timeout = 0;
    $("#sub-menu-content").hide();

    var html = '<ul>' + $(this).next('ul.sub-menu').html() + '</ul>&nbsp;';
    $("#sub-menu-content").html(html); //show the html inside .content div
    $("#sub-menu-content").fadeIn('fast'); //animation
},function(){
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(

$('#sub-menu-content').hover(function() {
    if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
    hideSubMenu.timeout = 0;
},function(){
    hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(
}); //close $(

Чтобы увидеть это в действии:

http://cruisecontrolledmarketing.com/test/welcome/login пользователь: пароль пользователя: rebmem

Спасибо!

Answer 1

Вместо того, чтобы взломать что-то самостоятельно, как насчет проверки плагина hoverIntent ?

Answer 2

Я обнаружил удивительную страницу, которая почти содержит различную концепцию меню, всплывающих окон, парения и т. Д. С любыми видами эффектов, которые вы можете себе представить. Я считаю невероятно полезным расширять некоторые из них и создавать еще лучшие меню.

45 красивых плагинов и учебных пособий для jQuery Menu