If you’ve ever been amazed by just how fast and responsive Amazon’s drop-down menus are, you’re not alone. Ben Kamens, lead developer at the Kahn Academy, decided to work out how Amazon does it. It’s sneaky.
You see, most drop-down menus include some delay to give you time to move the cursor without the sub-menu disappearing as you do so. Not Amazon. Kamens explains:
They get away with this by detecting the direction of the cursor’s path. At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. If the next mouse position is within that triangle, the user is probably moving their cursor into the currently displayed submenu. Amazon uses this for a nice effect. As long as the cursor stays within that blue triangle the current submenu will stay open. It doesn’t matter if the cursor hovers over “Appstore for Android” momentarily – the user is probably heading toward “Learn more about Cloud Drive.”
Picture: Ben Kamens