2009-06-08 2 views
2

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

$ (document) .ready (function() { 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

Спасибо!

ответ

7

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

+0

Я проверю его. Я этого раньше не видел. –

+0

Я рекомендую. Мы постоянно используем его в производстве на сайтах. Хороший и простой в настройке, и должен делать именно то, что вам нужно. – ajm

+0

Я пытаюсь заставить его работать. Я бы просто заменил события наведения? т.е. $ ('# menu a'). hover (function() {станет $ ("# menu a"). hoverIntent (config, function()) { Я также нашел jquery.event.hover-1.0. js - он должен быть «лучше», чем hoverIntent. Я проверю оба. –

0

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

45 beautiful jQuery Menu plugins and tutorials