Added two new features: exitOnMouseOut and submenuWrap

README.md

@@ -28,42 +28,41 @@ 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() {},
-
-         // Function to call when mouse exits the entire menu. If this returns
-         // true, the current row's deactivation event and callback function
-         // will be fired. Otherwise, if this isn't supplied or it returns
-         // false, the currently activated row will stay activated when the
-         // mouse leaves the menu entirely.
-         exitMenu: 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: "*",
-
-         // Direction the submenu opens relative to the main menu. This
-         // controls which direction is "forgiving" as the user moves their
-         // cursor from the main menu into the submenu. Can be one of "right",
-         // "left", "above", or "below". Defaults to "right".
-         submenuDirection: "right"
+ *          // 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: "*",
+ *
+ *           // What element wraps the submenu you want show on hover?
+ *          // It's useful to know because then code can detect if hovered element has one and if not, no delay will
+ *          // be applied to activate next menu item. Defaults to "*" (all elements).
+ *          submenuWrap: "*",
+ *
+ *          // Direction the submenu opens relative to the main menu. Can be
+ *          // left, right, above, or below. Defaults to "right".
+ *          submenuDirection: "right"
+
+ *          // Close submenu if mouse moves out of menu.
+ *          exitOnMouseOut: false
      });
 
 menu-aim assumes that you are using a menu with submenus that expand

example/example.html

@@ -177,6 +177,9 @@ <h3 class="popover-title">King Colobus</h3>
                             <div class="popover-content"><img src="img/colobus.png"></div>
                         </div>
                     </li>
+	                <li data-submenu-id="submenu-empty-item">
+		                <a href="#">Empty item</a>
+	                </li>
                 </ul>
               </li>
             </ul>
@@ -203,7 +206,9 @@ <h1>jQuery-menu-aim example</h1>
         // Hook up events to be fired on menu row activation.
         $menu.menuAim({
             activate: activateSubmenu,
-            deactivate: deactivateSubmenu
+            deactivate: deactivateSubmenu,
+	        exitOnMouseOut: true, //this is optional
+	        submenuWrap: '.popover' //this is optional
         });
         // jQuery-menu-aim: </meaningful part of the example>
 

jquery.menu-aim.js

@@ -62,9 +62,18 @@
  *          // this selector. Defaults to "*" (all elements).
  *          submenuSelector: "*",
  *
+ *           // What element wraps the submenu you want show on hover?
+ *          // It's useful to know because then code can detect if hovered element has one and if not, no delay will
+ *          // be applied to activate next menu item. Defaults to "*" (all elements).
+ *          submenuWrap: "*",
+ *
  *          // Direction the submenu opens relative to the main menu. Can be
  *          // left, right, above, or below. Defaults to "right".
  *          submenuDirection: "right"
+
+ *          // Close submenu if mouse moves out of menu.
+ *          exitOnMouseOut: false
+
  *      });
  *
  * https://github.com/kamens/jQuery-menu-aim
@@ -89,13 +98,15 @@
             options = $.extend({
                 rowSelector: "> li",
                 submenuSelector: "*",
+	            submenuWrap: '*',
                 submenuDirection: "right",
                 tolerance: 75,  // bigger = more forgivey when entering submenu
                 enter: $.noop,
                 exit: $.noop,
                 activate: $.noop,
                 deactivate: $.noop,
-                exitMenu: $.noop
+                exitMenu: $.noop,
+				exitOnMouseOut: false
             }, opts);
 
         var MOUSE_LOCS_TRACKED = 3,  // number of past mouse locations to track
@@ -122,7 +133,7 @@
 
                 // If exitMenu is supplied and returns true, deactivate the
                 // currently active row on menu exit.
-                if (options.exitMenu(this)) {
+                if (options.exitMenu(this) || options.exitOnMouseOut) {
                     if (activeRow) {
                         options.deactivate(activeRow);
                     }
@@ -158,17 +169,24 @@
          * Activate a menu row.
          */
         var activate = function(row) {
-                if (row == activeRow) {
-                    return;
-                }
+            if (row == activeRow) {
+                return;
+            }
 
-                if (activeRow) {
-                    options.deactivate(activeRow);
-                }
+            if (activeRow) {
+                options.deactivate(activeRow);
+            }
 
-                options.activate(row);
-                activeRow = row;
-            };
+            options.activate(row);
+            activeRow = row;
+
+	        //check if we have subemenu. if not we can activate next menu item instantly.
+	        if ($(row).find(options.submenuWrap).length === 0) {
+		        wasRowEmpty = false;
+	        } else {
+		        wasRowEmpty = true;
+	        }
+        };
 
         /**
          * Possibly activate a menu row. If mouse movement indicates that we
@@ -178,7 +196,7 @@
         var possiblyActivate = function(row) {
                 var delay = activationDelay();
 
-                if (delay) {
+                if (delay && wasRowEmpty) {
                     timeoutId = setTimeout(function() {
                         possiblyActivate(row);
                     }, delay);