Diagonal Movement

A JavaScript plugin that detects the direction of the mouse movement (diagonal vs vertical). It can be used when implementing dropdown navigations to differentiate between hovering a new menu item vs moving to a sub-menu. Based on the jQuery-menu-aim plugin.

How to

This plugin is a JavaScript version of the jQuery-menu-aim plugin (with some minor modifications).

It can be used to detect the direction of the mouse movement in cases where you want to differenciate between a diagonal and a vertical movement. A use case is the implementation of a dropdown navigation. 

Here's how you can use the plugin:

new menuAim({
  menu: menu, //menu element (e.g., the <ul> list)
  rows: rows, // list items in the menu element (e.g., <li> children)
  submenuSelector: submenus, // CSS selector for items with sub-navigation
  activate: function(row) {
    // function to be executed when hovering over a list item
  },
  deactivate: function(row) {
    // function to be executed when leaving a list item (and its sub-navigation element)
  },
  exitMenu: function(row) {
    // function to be executed when leaving the menu element
    // if returns true, the plugin will deactivate the currently active row on menu exit.
  }
});

Reset/destroy events #

If you need to destroy the event listeners that are set up by the plugin (e.g., on a mobile device), you can use the destroy custom event:

new menuAim({
  menu: menu, //menu element
  // all other options here
});

// destroy menu events
var detroyEvent = new CustomEvent('destroy');
menu.dispatchEvent(detroyEvent);

You can use the reset custom event to rest the menu to its initial state:

var resetEvent = new CustomEvent('reset', {detail: true});
menu.dispatchEvent(resetEvent);

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗