Question

首先，我要解释的一切都在这个小提琴中得到了证明：

考虑一个深入3个级别的导航标签;第一级选项卡，第二级：下拉列表。第3级打开侧面的第2个下拉列表。这是一个视觉：

enter image description here

。它的简化HTML看起来像这样：

<ul id = "maintabs">
    <li>child 1</li>
    <li>child 2
        <ul>
            <li>grand child 1</li>
            <li>grand child 2
                <ul>
                    <li>great grand child 1</li>
                    <li>great grand child 2</li>
                    <li>great grand child 3</li>
                </ul>                
            </li>
        </ul>    
    </li>
</ul>

我不打算把CSS代码放在这里，因为它太长了，但它可以在小提琴link中找到。

这是基于鼠标悬停显示/隐藏菜单的jQuery代码：

$("ul#maintabs li").hover(function () {
    $('ul:eq(0)', this).stop(true, true).animate({
        height: 'show',
        opacity: 'show'
    }, 150);
}, function () {
    $('ul:eq(0)', this).animate({
        height: 'hide',
        opacity: 'hide'
    }, 150);
})

所有这些都很有效，但用户交互可以改进导航到第3级项目。让我们说你想导航到西瓜＆gt;绿色＆gt;真的是深绿色。所以你将鼠标悬停在“西瓜”上，然后出现下拉菜单，然后将鼠标悬停至“绿色”，然后出现侧面下拉菜单。然后水平地从“绿色”悬停到“更暗”，然后垂直向下悬停到“真正的深绿色”。这是一个视觉。鼠标移动由红色箭头显示：

enter image description here

但是，如果用户想要从“绿色”直线转到“真正的深绿色”而不首先水平滚动，该怎么办？这是所需行为的视觉效果：

enter image description here

这会导致鼠标“绿色”，因此菜单会崩溃并完全消失。那怎么能修好呢？

我尝试增加mouseleave的超时，但是又出现了另一个问题：如果你想在途中从绿色直线变为“真正的深绿色”，你会将鼠标悬停在“红色”上，也可能是“紫色”。如果“红色”还有孩子怎么办？然后将“绿色”和“红色”鼠标移出，同时显示“红色”子菜单，然后同时打开超过1个第3级菜单，看起来很糟糕。

希望所有这一切都有意义！

谢谢。

Answer 1

This little plugin可让您为悬停添加一点暂停，以便您可以查看用户是否确实要悬停。

Answer 2

发现这篇精彩的文章完全符合我原来的问题：

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

Answer 3

$(document).ready(function() {
    $("ul.nav li").hover(function() { //When trigger is hovered...
        $(this).children("ul.sub").stop(true).slideDown();
    }, function() {
        $(this).children("ul.sub").stop(true).slideUp();
    });
});

这解决了我的问题

Answer 4

你考虑过用门垫吗？使用多层导航不是一个明智的想法，它有许多可用性问题。

这是你想要的理想行为。 Onmouseout，你希望元素消失，否则它会持续存在。

检查ibm网站上的门垫菜单，我相信你会喜欢它。

http://www.ibm.com/us/en/

对角鼠标悬停与3级深jquery下拉菜单

4 个答案: