一种侧边导航栏的交互方式

2020-03-21

最近看到几个管理系统的演示项目，结合开发过程中不顺手的地方，发现大多数网站的侧边导航栏都是点击展开，点击关闭。

感觉这样的交互方式稍微有点繁琐：

• 在不知道子菜单位置的情况下，需要一个一个点开才能找到需要的页面
• 在知道子菜单位置的情况下，也需要点击一下父级菜单，才能看到想要的子菜单
• 不一个一个点开，就无法知道子菜单有些什么
• 子菜单展开之后，需要一次一次点击父菜单才能收起

后来就想，能不能把点击事件换成悬浮事件呢？只要鼠标放上去，菜单就会自动展开，不用点一下的操作了。但是单纯的悬浮展开，需要考虑菜单长度不一致的问题，如果下一个菜单的长度比当前菜单短，鼠标离开当前菜单，当前菜单收回，鼠标所在的位置会直接越过下一长度较短的菜单。

像图片中这样，栏目二的长度是4，栏目三的长度是2，当鼠标从栏目二向下移动，离开栏目二的瞬间栏目二收回内容，鼠标在没有移动的情况下跳过了栏目三，悬浮在栏目四上，这其实是不合理的，会违背用户的预期。栏目二之后是栏目三，这是最正常的逻辑。

为了应对这一问题，也许可以将交互设计成这样，当鼠标离开栏目二后，栏目二不收回，直到鼠标离开整个导航栏，子菜单才自动折叠。如果子菜单展开时用户点击了某一父菜单，那这个父菜单即使鼠标离开导航栏也不收回。

下面是一个demo页面，通过iframe嵌入到这里，可以对比两种侧边导航栏的交互方式（移动端没有鼠标悬浮事件）。我偏爱灵活一点的交互，第二种方式单击父菜单也可以展开收起列表，相当于在方式一的基础上加入了鼠标悬浮自动展开的能力。

相较于鼠标悬浮自动展开不收回的方式，更进阶一点的做法是，当鼠标从上往下移动时，子菜单自动展开但不收回，当鼠标从下往上移动时，子菜单自动展开并且自动收回。因为子菜单要不要自动收回取决于对用户接下来的操作有没有影响。不过这样的效果实现起来有些复杂了，对于网页上的一个导航栏来说，需要不断监听鼠标的坐标，开发和和维护的成本有点高。