大导航用户体验优化方案
使用mouseener和mouseover事件控制菜单切换,也是绝大部分二级导航的实现方式
-
想要选择子导航上的选项,鼠标移动时不能触碰到主导航的其他tab。只能折线移动。这是很多网站没有优化的地方
-
快速移动时,子导航也会快速切换
1.为子导航显示设置阶段计时器,触发事件时若鼠标在子导航内,则继续执行,若不在子导航内,则不执行
2.去抖,计时器代码段还未执行完就触发了二次事件时,立即清空计时器。即只执行最后一次代码段
- 很明显,切换主菜单延迟问题
- 用户行为预判,向量积。如果鼠标移动范围在三角形内,则用户极大可能是想要浏览子菜单,若不在范围内,则不需要使用延迟
更具体的说明请前往博客