Monthly Archives: March 2013

How Amazon Solved the Dropdown Delay Problem

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.

Amazon Menu Triangle

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]

BlogBuzz March 16, 2013

Google Reader

Google Reader to Shut Down on July 1st

Google announced on Wednesday that Google Reader, the search giant’s RSS aggregator, will be discontinued on July 1st, 2013. Users have until then to export their subscriptions and other data with Google Takeout. This is likely a result of Larry Page’s “leaner Google,” which…

Method Chaining in PHP

Have you ever come across a PHP class that connects methods together in a single line to achieve some goal? (If you haven’t, Guzzle and SwiftMail are a couple of examples.) jQuery also operates in a similar manner, using the same principle. The technique…

FillDisk Proof-of-Concept Demonstrates Flaw in Browsers’ localStorage Implementations

HTML5’s localStorage API makes it possible for a web page to store 5-10MB of persistent data, much like cookies, but for more complex data—as you probably already know if you’re familiar with HTML5’s fancy new APIs. Feross Aboukhadijeh came up with an interesting and…