Jquery-menu-aim流畅的菜单滑动体验

最新推荐文章于 2024-05-10 09:47:48 发布

转载最新推荐文章于 2024-05-10 09:47:48 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/boonya/archive/2013/03/12/2956635.html

本文介绍了一个名为menu-aim的jQuery插件，该插件能够区分用户是尝试悬停在一个下拉菜单项上还是试图进入子菜单的内容。通过检测鼠标移动的方向，可以加快在菜单中上下导航的速度，提供类似Amazon的按部门购物下拉菜单的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考网址：https://github.com/kamens/jQuery-menu-aim

Amazon网站分类导航的下拉菜单被使用得非常频繁，但你有没有注意过它的反应非常迅速？

如此急速的用户体验,应该相当perfect了吧。

jQuery-menu-aim

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.

menu-aim assumes that you are using a menu with submenus that expand to the menu's right. It will fire events when the user's mouse enters a new dropdown item and when that item is being intentionally hovered over.

This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user's mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/'s "Shop by Department" dropdown.

Use like so:

 $("#menu").menuAim({
     activate: $.noop,  // fired on row activation
     deactivate: $.noop,  // fired on row deactivation
 });

...to receive events when a menu's row has been purposefully (de)activated.

The following options can be passed to menuAim. All functions execute with the relevant row's HTML element as the execution context ('this'):

 .menuAim({
     // Function to call when a row is purposefully activated. Use this
     // to show a submenu's content for the activated row.
     activate: function() {},

     // Function to call when a row is deactivated.
     deactivate: function() {},

     // Function to call when mouse enters a menu row. Entering a row
     // does not mean the row has been activated, as the user may be
     // mousing over to a submenu.
     enter: function() {},

     // Function to call when mouse exits a menu row.
     exit: function() {},

     // Selector for identifying which elements in the menu are rows
     // that can trigger the above events. Defaults to "> li".
     rowSelector: "> li",

     // You may have some menu rows that aren't submenus and therefore
     // shouldn't ever need to "activate." If so, filter submenu rows w/
     // this selector. Defaults to "*" (all elements).
     submenuSelector: "*"
 });

Want an example to learn from?

Check out example/example.html -- it has a working dropdown for you to play with:

Play with the above example full of fun monkey pictures by opening example/example.html after downloading the repo.

转载于:https://www.cnblogs.com/boonya/archive/2013/03/12/2956635.html