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

上面是亚马逊网站的下拉导航菜单，类似于天猫和京东商城。精心开发5年的UI前端框架！

 

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

 

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

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

 

亚马逊的鼠标移进和移出效果做的非常好，用起来感觉非常容易。为了避免上面的bug，亚马逊对鼠标移动路径代表的用户意图做了一定的分析和预判。精心开发5年的UI前端框架！

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

 

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

当然如果指针离开了这个三角形区域，那么就需切换菜单了。精心开发5年的UI前端框架！

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

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