javascriptcssdrop-down-menumenumegamenu
How does the Etsy mega menu mouse UX work?
Etsy (https://www.etsy.com/) seem to have really good ux around mouse movement on their mega menu.
I'm trying to work out how they do it. It seems like you can travel any distance at an angle from the parent and it won't select the parent below, but if you move your mouse vertically it instantly selects the ones below without delay.
I'm used to doing the old invisible padded boxes trick, but this feels like something else. I inspected their markup and couldn't see any pseudo elements being added so I can only imagine it's tracking mouse direction in JS?
Solution
Update: I've decided to use this library called Hoverintent which tracks mouse movement and determines if the user had intended to hover on the element or was just passing through!