Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ 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.

## Installation
```
bower install jquery.menuaim --save
```

## Demo
[Try a demo.](https://rawgithub.com/kamens/jQuery-menu-aim/master/example/example.html)

![Amazon screenshot](https://raw.github.com/kamens/jQuery-menu-aim/master/amazon.png)
Expand Down Expand Up @@ -63,7 +69,10 @@ the relevant row's HTML element as the execution context ('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"
submenuDirection: "right",

// ms delay when user appears to be entering submenu
delay = 300
});

menu-aim assumes that you are using a menu with submenus that expand
Expand Down
12 changes: 12 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "jquery.menu-aim",
"version": "1.1.0",
"main": "jquery.menu-aim.js",
"dependencies": {
"jquery": "*"
},
"ignore": [
"example",
"*.png"
]
}
56 changes: 47 additions & 9 deletions jquery.menu-aim.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/**
* 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.
* a submenu's contents. It will fire events when the user's mouse enters a
* new dropdown item *and* when that item is being intentionally hovered over.
*
* menu-aim assumes that you have 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
Expand Down Expand Up @@ -95,11 +96,11 @@
exit: $.noop,
activate: $.noop,
deactivate: $.noop,
exitMenu: $.noop
exitMenu: $.noop,
delay: 300
}, opts);

var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track
DELAY = 300; // ms delay when user appears to be entering submenu
var MOUSE_LOCS_TRACKED = 3; // number of past mouse locations to track

/**
* Keep track of the last few locations of the mouse.
Expand Down Expand Up @@ -144,6 +145,12 @@
possiblyActivate(this);
},
mouseleaveRow = function() {

/* https://github.com/kamens/jQuery-menu-aim/pull/29/commits - thanks to magwo */
if (timeoutId) {
// Cancel any pending activation
clearTimeout(timeoutId);
}
options.exit(this);
};

Expand All @@ -166,6 +173,12 @@
options.deactivate(activeRow);
}

/* https://github.com/kamens/jQuery-menu-aim/pull/33/commits */
if (! $(row).is(options.submenuSelector)){
activeRow = null;
return;
}

options.activate(row);
activeRow = row;
};
Expand Down Expand Up @@ -205,15 +218,15 @@
var offset = $menu.offset(),
upperLeft = {
x: offset.left,
y: offset.top - options.tolerance
y: offset.top
},
upperRight = {
x: offset.left + $menu.outerWidth(),
y: upperLeft.y
},
lowerLeft = {
x: offset.left,
y: offset.top + $menu.outerHeight() + options.tolerance
y: offset.top + $menu.outerHeight()
},
lowerRight = {
x: offset.left + $menu.outerWidth(),
Expand All @@ -230,6 +243,22 @@
prevLoc = loc;
}

/* https://github.com/kamens/jQuery-menu-aim/pull/22/commits - thanks to tuckbick */
// Adjust the corner points to enable tolerance.
if (options.submenuDirection == "right") {
upperRight.y -= options.tolerance;
lowerRight.y += options.tolerance;
} else if (options.submenuDirection == "left") {
upperLeft.y -= options.tolerance;
lowerLeft.y += options.tolerance;
} else if (options.submenuDirection == "above") {
upperLeft.x -= options.tolerance;
upperRight.x += options.tolerance;
} else if (options.submenuDirection == "below") {
lowerLeft.x -= options.tolerance;
lowerRight.x += options.tolerance;
}

if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
// If the previous mouse location was outside of the entire
Expand Down Expand Up @@ -299,7 +328,7 @@
// currently activated submenu. Delay before activating a
// new menu row, because user may be moving into submenu.
lastDelayLoc = loc;
return DELAY;
return options.delay;
}

lastDelayLoc = null;
Expand All @@ -316,8 +345,17 @@
.mouseleave(mouseleaveRow)
.click(clickRow);

/* https://github.com/kamens/jQuery-menu-aim/pull/31/commits - thanks to saralk */
$menu.bind('DOMNodeInserted', function(e) {
var $newEl = $(e.target);
if ($newEl.is(options.rowSelector)) {
$newEl.mouseenter(mouseenterRow)
.mouseleave(mouseleaveRow)
.click(clickRow);
}
});

$(document).mousemove(mousemoveDocument);

};
})(jQuery);

})(jQuery);