Question

我在这个网站上有一个大型菜单，我正在建设。要打开超级菜单，请将鼠标悬停在所需的项目上

<nav id="primaryMenu">
    <ul>
        <li class="menu-learn"><a href="#">Item 1</a></li>
        <li class="menu-teach"><a href="#">Item 2</a></li>
        <li class="menu-draw"><a href="#">Item 3</a></li>
        <li class="menu-build"><a href="#">Item 4</a></li>
    <ul>
</nav>
<div class="mega-menu">
    <div class="cat-learn">
        <h1>Content</h1>
    </div>
    <div class="cat-teach">
        <h1>Content</h1>
    </div>
    <div class="cat-draw">
        <h1>Content</h1>
    </div>
    <div class="cat-build">
    </div>
</div>

使用JQuery，我创建了这个函数，在mega菜单中的相应<div>中添加了一个active类。

    function menuHover(item, Megadrop){
        $(item).hover(
            function(){
                setTimeout( function(){$(Megadrop).addClass('active')}, 500);   
            },
            function(){
                setTimeout( function(){$(Megadrop).removeClass('active')}, 200);
            }
        );
        $(Megadrop).hover(

            function(){$(this).addClass('active') },
            function(){$(this).removeClass('active')}
        );
    }
    menuHover('.menu-learn','.mega-menu .learn');
    menuHover('.menu-teach','.mega-menu .cat-teach');
    menuHover('.menu-draw','.mega-menu .cat-draw');
    menuHover('.menu-play','.mega-menu .cat-play');

巨型菜单显示在导航栏的全宽度下方。问题是，如果您在转到巨型菜单上的某个位置时将鼠标移到另一个列表导航项上，您将在此过程中激活该超级菜单。当＆＃34;经过＆＃34;时，如何防止新的大型菜单打开？原始导航项和大型菜单之间的另一个导航项？

我是否应该使用javascript抛弃悬停以获取 onMouse 事件？

Answer 1

这是一个众所周知的案例。这是一个解决它的人，模仿亚马逊的大型菜单。

真的值得一看： https://github.com/kamens/jQuery-menu-aim

文章中的更多信息： http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

祝你好运！

通过不同的菜单项

1 个答案: