顶+左侧导航菜单实现方案

前言

• 导航菜单的主要功能是：用户根据菜单，跳转到相应页面；高亮菜单项，让用户感知到当前所在位置
• 今天要分享的是顶部+左侧导航菜单的设计实现方案

页面布局

顶部 + 左侧导航菜单就是把页面拆分为顶部导航区、左侧导航区和内容区三部分：

导航菜单状态

导航菜单总共有三种状态：

无相应菜单

当前页面无相应菜单时，顶部导航区无高亮菜单，左侧导航区收起：

当前页面的菜单是一级菜单

当前页面的菜单是一级菜单时，顶部导航区有高亮菜单，左侧导航区收起：

当前页面菜单不是一级菜单

当前页面菜单不是一级菜单时，顶部导航区有高亮菜单，左侧导航区展开并有高亮菜单：

修改导航菜单状态的场景

1. 首次加载页面、刷新
2. 点击顶部菜单
3. 点击左侧菜单
4. 浏览器前进/后退
5. 内部路由跳转

菜单数据

菜单数据是一个树形结构数据：

[
  {
    "name": "菜单1",
    "path": "/1",
    "children": [
      {
        "name": "菜单1-1",
        "path": "/1-1",
        "children": [
          {
            "name": "菜单1-1-1",
            "path": "/1-1-1",
            "children": []
          },
        ]
      },
      {
        "name": "菜单1-2",
        "path": "/1-2",
        "children": []
      },
      {
        "name": "菜单1-3",
        "path": "/1-3",
        "children": []
      }
    ]
  },
  {
    "name": "菜单2",
    "path": "/2",
    "children": [
      {
        "name": "菜单2-1",
        "path": "/2-1",
        "children": []
      },
      {
        "name": "菜单2-2",
        "path": "/2-2",
        "children": []
      }
    ]
  }
]

菜单加载显示逻辑

1. 一级菜单显示在顶部导航区
2. 大于一级的菜单，根据当前选择的一级菜单显示在左侧导航区

菜单高亮逻辑

1. 通过菜单数据的path字段和页面URL（不包括域名和端口）进行匹配

2. 优先使用完整路径（带query查询参数）匹配，如匹配不上，则降级为基础路径（不带query查询参数）匹配
3. 无权限页面使用页面URL的query查询参数to，进行匹配

导航菜单实现逻辑

以下是根据修改导航菜单状态的场景列出实现逻辑：

1.首次加载页面、刷新

2.点击顶部菜单

• 注1：叶子节点可能层级较深。需要把父级菜单都展开，方便用户感知当前所在位置
• 注2：切换顶部菜单时候，缓存访问过的菜单，方便下次加载时，重新访问，提示用户体验

3. 点击左侧菜单

4.浏览器前进/后退、内部路由跳转

浏览器前进/后退、内部路由跳转，跟首次加载页面、刷新处理逻辑大体相同：

5.特殊情况处理：有菜单但无页面查看权限

• 无权限页面，本应该不展示相应菜单。
• 但由于种种原因，需要页面内部做逻辑判断后，才重定向到无权限页面。
• 所以针对这种情况我们可以做特殊处理，方便用户感知当前所在位置无查看权限：

总体流程图

总结

导航菜单是网站核心组成部分，是一个网站的灵魂，在用户体验和网站互动方面起着至关重要的作用。

以上顶部+左侧导航菜单的设计实现方案通过完整路径优先，基础路径兜底的方式高亮菜单，菜单数据无需添加额为字段，尽最大可能让用户感知到当前所在位置，提升了用户体验。

结语

感谢您耐心阅读这篇文章。如果您觉得内容对您有帮助或启发，请不吝点赞支持。如果您发现文章中的任何错误或需要改进的地方，欢迎您指正批评。