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

泡在网上的日子 / 文 发表于2013-03-18 21:38 次阅读

image

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


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

image


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

image

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


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

image

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


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

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

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

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

image


收藏 赞 (0) 踩 (0)
上一篇:chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异. 常规的断点相关的 breakpoint/conditional-breakpoint/ca
下一篇:javascript调用百度地图,以及城市的初始化
地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一、引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件来自百度的服务器(所以必须得联网,不然就没戏。。),我们以后用到的所有方法都写在这个JS