Amazon evita el retraso en sus menús desplegables con detección de dirección
El gigante del e‑commerce usa un truco geométrico para que sus submenús respondan al instante, y un desarrollador ha convertido la idea en un plugin de jQuery.
Amazon ha logrado que su mega‑dropdown “Shop by Department” sea increíblemente rápido sin el retardo que suele acompañar a los submenús. En la práctica, al mover el cursor hacia abajo por la lista principal, el submenu que corresponde se abre al instante, sin que desaparezca como ocurre en la mayoría de los menús tradicionales.
En los menús típicos, se introduce un pequeño retraso para evitar que el submenu se cierre cuando el usuario intenta desplazarse del menú principal al submenu. Si el retardo no existe, el cursor puede “saltarse” el elemento y el submenu desaparece, creando una experiencia similar a un juego de whack‑a‑mole. Bootstrap muestra claramente este problema con su ejemplo de dropdown.
Amazon elude esa trampa calculando la dirección del movimiento del cursor. Imagina un triángulo azul que se forma entre la posición actual del mouse y los extremos superior e inferior derecho del menú. Mientras el siguiente punto del cursor caiga dentro de ese triángulo, el algoritmo asume que el usuario se dirige al submenu actual y lo mantiene abierto. Salir del triángulo dispara el cambio inmediato al siguiente submenu. El resultado es una sensación de respuesta “instantánea” sin necesidad de un retardo artificial.
Ben Kamens, autor del post original, replicó ese comportamiento en un plugin de jQuery llamado jQuery‑menu‑aim. El plugin expone eventos que se disparan cuando la trayectoria del mouse entra o sale del triángulo imaginario, permitiendo a los desarrolladores aplicar la misma lógica en sus propias interfaces. Kamens lo está usando en el nuevo menú “Learn” de Khan Academy y afirma que la interacción se siente mucho más ágil.
El desarrollo del plugin no fue una simple copia. Kamens agradece a Sophie Alpert por explicarle la parte de álgebra lineal y productos cruzados que Amazon emplea para la detección. Al final, optó por una solución basada en pendientes, más sencilla de implementar aunque menos elegante matemáticamente.
Esta técnica demuestra que incluso un detalle tan pequeño como la forma de abrir un submenu puede marcar una gran diferencia en la percepción de rapidez de un sitio. Con el código abierto disponible, cualquier proyecto que dependa de menús extensos puede beneficiarse sin reinventar la rueda. Queda por ver cuántas interfaces adoptarán esta estrategia y si el plugin será integrado en frameworks más grandes, pero la puerta está abierta para que la comunidad lo experimente y mejore.
