2

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.

enter image description here

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?

Titan
  • 5,567
  • 9
  • 55
  • 90
  • They are tracking mouse movement to the right from the point that triggers the subcategory to show. They have that in combination with a timer set to 500-800 (ms) or so, meaning that is how the "know" you are trying to go to the subcategories. So basically the are only triggering the hover for the next category, going left, going down or stopping right mouse movement after 500-800ms from last movement time. – Dejan.S Oct 08 '20 at 10:44

1 Answers1

0

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!

http://tristen.ca/hoverintent/

Titan
  • 5,567
  • 9
  • 55
  • 90