Enhanced menu: ability to show/hide menu based on mouseover (rather than click).

[geoffkendall]

This would enable drop-down menus from the nav bar to behave more like they do on most website and desktop apps. Thanks! :-)

[endigo9740]

@geoffkendall FYI I did a quick preliminary test for switching menus to use Hover events instead of click. While we can easily swap out the trigger event, it doesn't work like you might expect. Setting the "show" event with hover works as expected, but it's the "off" when you mouse out of the trigger/menu that's the problem. There's a small gap between the trigger and menu which means the menu closes before you reach it.

We would change the design here, but I feel that gap actually improves the design a bit, making it not feel so "attached" but related to.

Furthermore, I have mixed feeling about the UX here. While hover is nice for discoverability, it does have some negatives:

• If you don't realize a popup will appear, that might get in your way
• It's easy to accidentally browse outside of the desired hover area and accidentally close the menu
• If you have multiple drop downs (say from nav sections) then simply leaving the popup open doesn't work well, you end up with a mess of popups all over the the place.
• And an important one - hover isn't available to mobile. Determining what "mobile" is these days is a bit tricky in the age of large tablets and touchscreen monitors. So without some JS trickery I'm not sure how to work around this yet.

But, just wanted to give you a heads up where we're at on this! If you agree with some of the pain points mentioned above, then perhaps we might consider putting this one to rest for now.

[geoffkendall]

Thanks @endigo9740, you've convinced me that this is not a great idea. I think the mobile case in particular means that trying to replicate desktop-like menus is not the answer. Many thanks for looking into this!

[haneefkassam]

I've run into the need for this in other frameworks (quasar/vue specifically) and had to implement a debounce-style feature (in order to keep the menu open) and have hover events on both the trigger element and the appearing menu. It's a lot of boiler plate for what could be a property on a component, especially if it could be used a lot (in menus is definitely where this would be useful).