jquery:提取亚马逊网站的dropdown下拉菜单

原创
2013/03/26 22:48
阅读数 2.5K

image

上面是亚马逊网站的下拉导航菜单,类似于天猫和京东商城。


鼠 标移上去的效果反应非常迅速,事实上做过这种效果的人都应该知道,一般要做到如此快速的效果,当你从左侧移到右侧的时候是会出问题的。大多数  dropdown  菜单在鼠标移到菜单项并显示子菜单的时候,都会有一定的延迟效果,下面是old Khan Academy网站的一个例子:

image


看到那延迟效果了没?其实你是需要这个延迟的,不管是代码上还是审美上,如果没有这个延迟,你从主菜单移到子菜单的瞬间,子菜单会消失掉。这会让用户觉得心里闹得慌,就像下面这样:

image

那么亚马逊是如何做到在不使用延迟方法的情况下做到避免上述问题的呢?


亚马逊的鼠标移进和移出效果做的非常好,用起来感觉非常容易。为了避免上面的bug,亚马逊对鼠标移动路径代表的用户意图做了一定的分析和预判。

image

如果用户的的指针进入到了蓝色的三角形区域,当前显示出来的子菜单会稍微停留的久一些。


在 指针到达的任何地方,你都能画出一个这样的三角形区域,三角形的三个点分别是:指针所在位置、右边子菜单区域的最左上角,右边子菜单区域的最左下角。如果 你的指针在这个区域内,用户的意思很可能是继续显示当前的子菜单,而不是切换到其他子菜单,尽管有可能指针已经在另外一下主菜单项的上面。

当然如果指针离开了这个三角形区域,那么就需切换菜单了。

所以如果你是一个偏执框,希望自己的dropdown做的非常的酷,我用jQuery写的一个插件也许你可以参考一下,这个插件能识别出用户的这个意图。

插件的叫jQuery-menu-aim可以在github上找到。下面是我用这个插件为new Khan Academy做的菜单效果:

image
展开阅读全文
js
打赏
0
128 收藏
分享
加载中
左边菜单relative,右边大菜单absoute js控制显示隐藏
2013/03/30 23:53
回复
举报
很不错,学习了
2013/03/30 07:20
回复
举报
都太聪明了
2013/03/29 13:33
回复
举报
COOL
2013/03/28 23:01
回复
举报

引用来自“郑柯”的评论

这个还用提取,他们自己就已经发布了

发布的是淘宝吧,淘宝是通过延迟效果实现的
2013/03/28 19:25
回复
举报
这个还用提取,他们自己就已经发布了
2013/03/28 13:23
回复
举报
有意思,学习
2013/03/27 13:01
回复
举报
分析的不错,学习了
2013/03/27 08:15
回复
举报
更多评论
打赏
8 评论
128 收藏
0
分享
返回顶部
顶部