1

我想创建一个响应式多列菜单，就像http://www.indochino.com上使用的那样，有人知道该怎么做吗？我的出发点应该是这个脚本：http ://codepen.io/bradfrost/pen/IEBrz

非常感谢，乔治

4

1 回答 1

0

看看jQuery方法.hover、、、、.mousein和.mouseout。.mouseenter.mouseleave

.css当用户的鼠标经过导航链接时，您将要做的是使用 jQuery 的 '.animate` 等方法之一来显示/隐藏菜单。当他们的鼠标离开导航链接和菜单时，您将需要再次使用一种方法（可能与以前相同）来隐藏菜单。

这是一个例子：

$(document).ready(function() {
    var $navLink = $("#navLink"); //for sake of ease, I will assume you have only one menu, as in the example site
    var $subMenu = $("#subMenu"); // see the above comment

    //global flags
    var overLink = false; 
    var overMenu = false;

    function checkAndHide() {
        if (!overLink && !overMenu) {
            $subMenu.css("display", "none");  

            $subMenu.off("mouseleave.hide");
            $navLink.off("mouseleave.hide");

            $navLink.on("mouseenter.show", function() { 
                overLink = true;
                displayMenu();
            });

        }
    }

    function displayMenu() {
        $subMenu.css("display", "inline-block");

        $navLink.off("mouseenter.show");
        //this is where you have some major implementation decisions
        //for sake of ease, I will simply use some global flags

        $navLink.on("mouseleave.hide", function() { 
            overLink = false;
            checkAndHide(); 
        });
        $subMenu.on("mouseleave.hide", function() {
            overMenu = false; 
            checkAndHide(); 
        });
    };

    $subMenu.on("mouseenter.updateFlag", function() { 
        overMenu = true;
    });

    $navLink.on("mouseenter.updateFlag", function() {
        overLink = true;
    });

});

以上是可能解决方案的非常非常粗略的草案。这不是你应该简单地复制和粘贴的东西，但它应该让你知道你应该尝试做什么。我使用了很多.onand.off调用，你也应该这样做，以节省调用不再需要的处理程序的开销。然而，最重要的是打开和关闭 的.mouseenter处理程序$navLink，因为您可能决定使用（或将来更改为）可能在元素上明显重复的效果（如滑动，然后再次向下滑动）。在我的示例中，这不是很重要，但根据您的实现可能很重要。

祝你好运！:)

于 2013-04-11T15:08:12.010 回答