You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<title>Jquery Plugin To Fire Events When User's Cursor Aims At Particular Dropdown Menu Items. For Making Responsive Mega Dropdowns Like Amazon's.</title>
7
-
<metaname="description" content="jQuery-menu-aim by kamens. jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.">
6
+
<title>jQuery Menu Aim by Kamens</title>
7
+
<metaname="description" content="jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.">
<pid="packageDescription" class="text-muted">jQuery plugin to fire events when user's cursor aims at particular dropdown menu items. For making responsive mega dropdowns like Amazon's.</p>
<p>This problem is normally solved using timeouts and delays. menu-aim tries to<br/>
186
+
solve this by detecting the direction of the user's mouse movement. This can<br/>
187
+
make for quicker transitions when navigating up and down the menu. The<br/>
188
+
experience is hopefully similar to amazon.com/'s "Shop by Department"<br/>
189
+
dropdown.</p>
190
+
<h2>Use like so:</h2>
191
+
<pre><code> $("#menu").menuAim({
192
+
activate: $.noop, // fired on row activation
193
+
deactivate: $.noop // fired on row deactivation
194
+
});</code></pre>
195
+
<p>...to receive events when a menu's row has been purposefully (de)activated.</p>
196
+
<p>The following options can be passed to menuAim. All functions execute with<br/>
197
+
the relevant row's HTML element as the execution context ('this'):</p>
198
+
<pre><code> .menuAim({
199
+
// Function to call when a row is purposefully activated. Use this
200
+
// to show a submenu's content for the activated row.
201
+
activate: function() {},
202
+
203
+
// Function to call when a row is deactivated.
204
+
deactivate: function() {},
205
+
206
+
// Function to call when mouse enters a menu row. Entering a row
207
+
// does not mean the row has been activated, as the user may be
208
+
// mousing over to a submenu.
209
+
enter: function() {},
210
+
211
+
// Function to call when mouse exits a menu row.
212
+
exit: function() {},
213
+
214
+
// Function to call when mouse exits the entire menu. If this returns
215
+
// true, the current row's deactivation event and callback function
216
+
// will be fired. Otherwise, if this isn't supplied or it returns
217
+
// false, the currently activated row will stay activated when the
218
+
// mouse leaves the menu entirely.
219
+
exitMenu: function() {},
220
+
221
+
// Selector for identifying which elements in the menu are rows
222
+
// that can trigger the above events. Defaults to "> li".
223
+
rowSelector: "> li",
224
+
225
+
// You may have some menu rows that aren't submenus and therefore
226
+
// shouldn't ever need to "activate." If so, filter submenu rows w/
227
+
// this selector. Defaults to "*" (all elements).
228
+
submenuSelector: "*",
229
+
230
+
// Direction the submenu opens relative to the main menu. This
231
+
// controls which direction is "forgiving" as the user moves their
232
+
// cursor from the main menu into the submenu. Can be one of "right",
233
+
// "left", "above", or "below". Defaults to "right".
234
+
submenuDirection: "right"
235
+
});</code></pre>
236
+
<p>menu-aim assumes that you are using a menu with submenus that expand<br/>
237
+
to the menu's right. It will fire events when the user's mouse enters a new<br/>
238
+
dropdown item <em>and</em> when that item is being intentionally hovered over.</p>
239
+
<h2>Want an example to learn from?</h2>
240
+
<p>Check out example/example.html -- it has <ahref="https://rawgithub.com/kamens/jQuery-menu-aim/master/example/example.html">a working dropdown for you to play with</a>:</p>
<em>Play with the above example full of fun monkey pictures by opening example/example.html after downloading the repo.</em></p>
243
+
<h2>FAQ</h2>
244
+
<ol>
245
+
<li>What's the license? <ahref="http://en.wikipedia.org/wiki/MIT_License">MIT</a>.</li>
246
+
<li>Does it support horizontal menus or submenus that open to the left? Yup. Check out the submenuDirection option above.</li>
247
+
<li>I work at a big company that requires a version number on this third party code before I can use it. Do you have a version number? Sure, current version: 1.1</li>
248
+
<li>I'm not nearly bored enough. Got anything else? <ahref="http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown">Read about this plugin's creation</a>.</li>
0 commit comments