Question

将鼠标悬停在菜单项上时，以下代码会显示子菜单。由于它使用计时器，如果你没有足够快地选择子菜单项，子菜单项就会消失。我宁愿让它高亮显示它所在的菜单选项并保留子菜单项，直到您将鼠标悬停在上面或单击另一个主菜单项：

（文档）$。就绪（函数（）{ Nifty（“＃menu a”，“small top transparent”）; 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 user：会员密码：rebmem

谢谢！

Answer 1

不是自己黑客攻击，而是查看hoverIntent plugin怎么样？

Answer 2

我找到了一个惊人的页面，它几乎包含了任何不同的菜单，弹出窗口，悬停等概念，因此您可以想象任何类型的效果。我发现扩展其中的一些并制作更好的菜单非常有用。

45 beautiful jQuery Menu plugins and tutorials

jQuery悬停菜单

2 个答案: