En la estrategia de la optimización de la web la velocidad de carga y el performance cada vez cobra más protagonismo las acciones destinadas a mejorar la «impresión» de velocidad. Hablamos de técnicas que tienen más que ver con la usabilidad que con la optimización de los recursos.
Un buen ejemplo de ello es el Jquery Menu Aim, un plugin basado en una solución implementada por Amazon que nos permitirá mejorar la usabilidad y la sensación de velocidad de los Mega Drop Down, esos menús de navegación multinivel que ofrecen información adicional a los enlaces.
La característica a la que nos referimos es la siguiente:
El menú de Amazon permite navegar entre las opciones muy rapidamente
La mayoría de los menús añaden un retraso al activar los subniveles. Aquí tenemos un ejemplo de funcionamiento normal:
El retraso que apreciamos es intencionado, se utiliza para evitar que al navegar por los subniveles cerremos la navegación al salirnos de la ‘ruta’. Aquí podemos ver un ejemplo de ese problema:
Amazon soluciona este problema detectando la dirección del cursor para anticipar sus movimientos.
Si la siguiente posición del puntero está dentro del triángulo el submenú permanece abierto
En cada posición del puntero del ratón se puede dibujar un triángulo entre las esquinas superior e inferior del menu. Si la siguiente posición del ratón se encuentra dentro de ese triángulo probablemente está navegando por el submenú que esté activado. Si el ratón sale del triángulo, el submenú se cierra.
Jquery Menu Aim imita este comportamiento del menú de Amazon con una implementación basada en Jquery.
Fuente: Breaking down Amazon’s mega drop down
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
La magia del triangulo azul