Use jQuery Menu Aim to improve responsiveness of our admin menus

[markjaquith]

This is a fantastic read: ​http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

And it resulted in an MIT-licensed jQuery plugin that we should absolutely consider using to improve our menus: ​https://github.com/kamens/jQuery-menu-aim

absolutely. and pls make sure it is easy to be used also outside admin (current component designation for this ticket) - in themes etc. been waiting for it 5 years, from the moment I learned about the triangle rule when disassembling a dysfunctional mega-menu

I'm not sure how well this would work with the minimized menu, since it's so narrow.

I think this is a great idea (and after I drew a diagram of how this would make her less frustrated on the Internet, so does my wife). Can/should we run some tests?

I am fully in favor of this. It could be used to benefit both back- and front-end UX (after we educated theme makers, naturally).

Proof of concept - testing the idea

No better way to see it than to try it, so here's a testing-the-idea patch against trunk. It seems to work but needs some adjustment on the leaving-the-menu and a few other minor things. But, in general, it does seem like something of an improvement.

See 23731-POC.diff for test patch.

Playing with it a bit, I find a slight improvement on the "Comments" menu (which has no submenu) by using rowSelector: "> li" instead. This makes it activate on the comments menu, which can cause it removes the currently open menu (like Pages) when the movement is in the "wrong" direction.

Tweaks like that, along with adjusting the timing, could be a real improvement.

23731.patch​ uses rowSelector: "> li.menu-top".

Seems like the deactivate event isn't fired when the submenu will be left with the mouse. To solve this I have added the menu.on( 'mouseleave', part.

+1 these speed changes really make a diff

ocean90 — With your patch applied, I find that it's not forgiving enough, when moving diagonally. Also, menus sometimes get stuck closed, and require a hover over another top level item to reset them.

Instead of using the mouseleave directly, try using the enter and exit functions that the menuAim adds instead.

Replying to Otto42:

try using the enter and exit functions that the menuAim adds instead.

I tried exit, but exit was also fired, when I moved the mouse in the triangle where the submenu should be still visible. Could be a bug in menuAim.

Oh, nevermind, I see what you were doing. I missed that the mouseleave was on the menu as a whole. Yes, the exit will fire when the menu item is left, even when inside the triangle, so that would be the wrong thing to use.

Replying to markjaquith:

ocean90 — With your patch applied, I find that it's not forgiving enough, when moving diagonally. Also, menus sometimes get stuck closed, and require a hover over another top level item to reset them.

Does 23731.2.patch​ a better job?

Edit:
Not good enough. Since the menu hasn't the full height as #adminmenuback, it's hard to move the mouse to the last submenu without closing it directly.

Better in some ways, but not quite forgiving enough, and yeah, the bottom menu is tricky.

Also, it would be nice if we didn't lose the jQuery hover intent stuff for when someone is hovering a submenu and they go off the bottom for a short moment.

The "triangle" idea is pretty good: delay hiding the submenu if the mouse is travelling in that direction. This only applies to somewhat wide vertical menus (does not work/is not needed for the folded admin menu and the toolbar).

The implementation (menu-aim.js) needs a bit more. For example doing $(document).mousemove(mousemoveDocument); is pointless and slow. Not tracking mouse move speed also makes this feel not as good as the current menu.

Don't think this is a replacement for hoverIntent, rather see it as an enhancement built into hoverIntent.