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.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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
  rows: rows, // list items in the menu element
  submenuSelector: submenus, // items that have 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
  }
});

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news