diff --git a/README.md b/README.md
index 0708e27..7a8b17f 100644
--- a/README.md
+++ b/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
diff --git a/example/example.html b/example/example.html
index 0df8388..f129846 100644
--- a/example/example.html
+++ b/example/example.html
@@ -177,6 +177,9 @@ King Colobus
+
+ Empty item
+
@@ -203,7 +206,9 @@ jQuery-menu-aim example
// 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:
diff --git a/jquery.menu-aim.js b/jquery.menu-aim.js
index 0c32941..744d8ad 100644
--- a/jquery.menu-aim.js
+++ b/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);
