If you’ve ever made a dropdown menu, you’re probably familiar with the “hover delay problem,” where a user tries to diagonally move the mouse from a submenu trigger to the menu that pops out, which causes the menu to snap closed when it loses focus. A common remedy is to add a delay, so the user has time to get their cursor from point A to point B without the menu closing or changing. Unfortunately, this makes menus seem sluggish, as there’s a small (but noticeable) delay before menus open or change.
Amazon, however, uses a more advanced trick, which cleverly solves the problem while enabling the menu to be snappy and delay-free. They track the cursor movement to determine the user’s intent. If it’s moving diagonally toward the submenu, the menu stays open. If it’s moving down the list, the submenu instantly changes. No delays making it seem sluggish, and no irritations from glitchy menus.
Ben Kamens, lead developer at Khan Academy, described this behavior in an interesting blog post and released a jQuery plugin that replicates it.
As it turns out, Apple has been using the same principle for their OS’s menus for a long time. At least since the early 1990s, perhaps earlier, though I’m not familiar enough with Apple’s history to pinpoint exactly when. It’s funny how often the wheel is reinvented…
Breaking down Amazon’s mega dropdown [Ben Kamens]
