导航优化方案——预判用户行为（一）

最新推荐文章于 2025-08-01 19:16:59 发布

weixin_33725515

最新推荐文章于 2025-08-01 19:16:59 发布

阅读量375

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a7c2adbf265da4e78328c76

本文介绍了一种电商网站中使用的详细主页导航的设计与实现方法，并通过逐步优化改进用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文最初发表在我的简书上

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

淘宝和京东等体量较大的电商平台，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如下：

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

存在问题：

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

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);
复制代码