Skip to content

try6/nav-Solution

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e7ea78b · Jan 18, 2018

History

12 Commits
Jan 18, 2018
Jan 18, 2018
Nov 27, 2017
Jan 18, 2018

Repository files navigation

nav-Solution

大导航用户体验优化方案

step1

使用mouseener和mouseover事件控制菜单切换,也是绝大部分二级导航的实现方式

效果gif

可优化点
  1. 想要选择子导航上的选项,鼠标移动时不能触碰到主导航的其他tab。只能折线移动。这是很多网站没有优化的地方

  2. 快速移动时,子导航也会快速切换

step2

解决方案

1.为子导航显示设置阶段计时器,触发事件时若鼠标在子导航内,则继续执行,若不在子导航内,则不执行

2.去抖,计时器代码段还未执行完就触发了二次事件时,立即清空计时器。即只执行最后一次代码段

效果gif

效果图

可优化点
  1. 很明显,切换主菜单延迟问题

step3

解决方案
  1. 用户行为预判,向量积。如果鼠标移动范围在三角形内,则用户极大可能是想要浏览子菜单,若不在范围内,则不需要使用延迟

更具体的说明请前往博客

最终效果

最终效果

About

大导航用户体验优化方案

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published