Breaking Down Amazon's Mega Dropdown Secret Revealed

Ben Kamens, the lead developer of Khan Acadamy and has been part of Fog Creek revealed one of Amazon's best kept-secret, the mega dropdown. According to Ben, the hover effects in Amazon's "Shop by Department" mega dropdown are super fast. The submenu files launch quickly as your mouse moves down the list. Most dropdown menus have to include a bit of delay when activating submenus. He compared the old Khan Academy dropdown as an example. The delay in most submenus were needed, because when you try to move your mouse from the main menu to the submenu, the submenu will disappear. How did Amazon get away without using a delay? In Amazon it's easy to move the cursor from the main dropdown to its submenus. They get away with this by detecting the direction of the cursor's path. If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer. Ben Kamis explained that 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 your mouse pointer is within the triangle, you are probably moving your cursor into the currently displayed submenu. Amazon clearly uses this kind of effect for a more responsive feel. If the cursor goes outside of the blue triangle, they instantly switch the submenu going back to the main menu. To make it easier for those programmers to copy the Amazon's technique on their dropdown menu, Ben provided a jQuery plugin that fires event when detecting this sort of directional menu aiming, the jQuery-menu-aim. The plugin was already integrated in the Khan Academy "Learn Menu." For more information regarding Ben Kamins technique just head on to his official blog.