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.
by
Janeth Kent Date:
11-04-2013
hits :
4523
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.
MENSAJE
OPERACIÓN EJECUTADA
We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".
These cookies are necessary for the website to function and cannot be disabled on our systems. They are generally only set in response to your actions in requesting services, such as setting your privacy preferences, logging in or completing forms. You can set your browser to block or alert you to these cookies, but some areas of the site will not work. These cookies do not store any personally identifiable information
Performance Cookies
These cookies allow us to count visits and traffic sources so that we can assess the performance of our site and improve it. They help us know which pages are the most or least visited, and how visitors navigate the site. All information collected by these cookies is aggregated and therefore anonymous. If you do not allow these cookies to be used, we will not know when you visited our site and will not be able to assess whether it worked properly
Functional Cookies
These cookies allow the website to provide better functionality and customization. They may be set by our company or by external providers whose services we have added to our pages. If you do not allow these cookies to be used, some of these services may not function properly
Targeted Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to profile your interests and display relevant ads on other sites. They do not directly store personal information, but are based on the unique identification of your browser and Internet device. If you do not allow these cookies to be used, you will see less targeted advertising