Snip
|
How did Amazon get away without using a delay?
|
|---|
Categories |
|
|---|
For Snip |
loading snip actions ... |
|---|---|
For Page |
loading url actions ... |
How did Amazon get away without using a delay?
It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. 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.
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.”
And if the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.
HTML |
<h1>How did Amazon get away without using a delay?</h1><br><p>It’s easy to move the cursor from Amazon’s main dropdown to its submenus. You won’t run into the bootstrap bug. They get away with this by detecting the direction of the cursor’s path.</p> <p class="center"><img src="http://static.tumblr.com/9hgswys/vogmj8fh4/screen_shot_2013-03-06_at_1.17.35_am.png" alt="image"><br><em>If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer.</em></p> <p>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.”</p> <p>And if the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel.</p> |
|---|
