Jquery-menu-aim流畅的菜单滑动体验
2013-03-12 22:39
351 查看
参考网址:https://github.com/kamens/jQuery-menu-aim
Amazon网站分类导航的下拉菜单被使用得非常频繁,但你有没有注意过它的反应非常迅速?
如此急速的用户体验,应该相当perfect了吧。
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.
...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'):
Play with the above example full of fun monkey pictures by opening example/example.html after downloading the repo.
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.
相关文章推荐
- JQuery实现QQMenu菜单收缩滑动效果
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
- Android 滑动菜单框架--SwipeMenuListView框架完全解析
- (转)android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
- 用jquery写的菜单从左往右滑动出现
- jquery的mouseover/mouseleave和mouseenter/mouseout区别,横向多级滑动菜单
- jQuery.mmenu – 用于移动 Web 项目的光滑菜单
- 基于jQuery实现的向下滑动二级菜单效果代码
- jQuery滑动导航菜单
- jQuery滑动导航菜单
- IOS学习之路十(仿人人滑动菜单Slide-out Sidebar Menu)
- 侧滑菜单(slidingMenu左右滑动)
- Magento Add Accordion menu for the Layer Navigation(给左侧筛选栏加上jquery滑动效果)
- 亚马逊的下拉菜单插件 jQuery-Menu-Aim 使用
- 一个基于jquery的TreeMenu和下拉式Menu菜单,代码很简单
- Jquery+CSS Menu菜单
- jQuery实现带延迟效果的滑动菜单代码
- jquery实现最简单的滑动菜单效果代码
- slidingmenu + fragment 左右菜单滑动
- jQuery 滑动菜单效果