京东大导航——预判用户行为（一）

nav.png

电商类网站不可避免的需要很多商品分类，为了使用户能够快速定位到想要的商品分类，一个详细的主页导航就显得举足轻重。

淘宝和京东等体量较大的电商平台，web端的主页都使用了分类详细的大导航，而且在导航的用户体验上做足了文章。

不知道大家有没有注意过他们在导航的实现上，和一般的导航有什么区别。

先埋个彩蛋

下面我们来从零开始模拟开发一个具有二级目录大导航。

html和css

常规的dom结构和样式实现

对于子导航的实现，淘宝使用了div的层层嵌套，而京东则是使用表格的结构。两种方式都能实现最终效果。可自行选择。

我在这里做了表格结构实现子导航的尝试。

不过table结构比div更耗性能啦~

<div class="sub">
    <div class="sub-content" id='sub-a'>
        <ul >
            <li><a href="# ">家电馆<span>&gt;</span></a></li>
            ...
        </ul>
        <dl >
            <dt><a href="# ">电视<span>&gt;</span></a></dt>
            <dd><a href="# ">曲面电视<span>&gt;</span></a></dd>
            ...
        </dl>
        <dl >
            <dt><a href="# ">空调<span>&gt;</span></a></dt>
            <dd><a href="# ">曲面空调<span>&gt;</span></a></dd>
            ...
        </dl>   
    </div>
</div>

为了方便后续使用js对样式的操作，在css中单独设置了名为none的类，设置隐藏样式

.none{
    display:none
}

js部分

step1：常规导航实现

思路：

• 鼠标移至主导航或子导航菜单中(mouseener)，对应选项样式改变，对应子导航显示
• 鼠标移出主导航或子导航菜单中(mouseleave)，选项样式取消，对应子导航隐藏

注：mouseener不冒泡，mouseover冒泡。详细内容请戳mouseover,mouseener,mousemove

效果gif如下：

step1.gif

一般实现到这一步，已经有了基本功能，可以流畅地进行导航切换。很多网站也只实现到了这一步，但事实上，这个导航还存在一些问题，有继续优化的空间。

存在问题：

1. 用户想到要选择子导航的某一选项时，鼠标必须先进入子导航内。如果在此之前触碰到主导航的其他选项，会立即切换。导航体量大，如果用户想要选择子导航内下方的选项，必须先从主导航平移至子导航内，也就是一个折线的过程。

nav_1.png

step2.延时切换

针对第一个问题，我们采取setTimeout,在mouseener事件被触发后，让子导航显示代码并不马上执行，而是延迟一段时间后再执行。并且每次执行前先判断鼠标是否在子菜单内，若不在则不执行切换导航代码

var mouseInSub = false;
sub-nav.on("mouseenner",function(){
    mouseInSub = true;
});
sub-nav.on("mouseleave",function(){
    mouseInSub = false;
});
var time = setTimeout(function() {
    if (mouseInSub) {
        return;
    }
    $(".sub-content").addClass("none");
    subNav.removeClass("none");
    setTimeout(function() {
        li.on("mouseleave", function() {
            let li = $(this);
            li.removeClass('active');
        })
    });
}, 500);

很明显，采取这种方法就引入了一个新的问题：用户在主导航上快速切换时，子导航的出现存在延时，降低了用户体验的流畅度

step2.gif

这就需要进一步进行优化。

step3.用户行为预判

思路：对用户的鼠标移动行为作出判断，若用户是想要移动到子导航，则进行延迟；若用户想在主导航上移动，则不需要延迟

如何判断用户到底是想要移动到子导航，还是想在主导航上移动呢？

详细内容戳京东大导航——预判用户行为（二）

源码见个人github地址!