Menú desplegable de varios niveles con jQuery

Cuando nos referimos a menús desplegables pocas veces hablamos de más de un nivel de jerarquía, en esta ocasión y gracias a la magia de Github llegó a jQuery Menu Aim, un plugin jQuery para justamente construir menús con más de un nivel de opciones.

jQuery Menu Aim es un plugin construido inspirado en Amazon, que justamente cuenta con un menú desplegable de lo más complejo, esto se debe principalmente a la cantidad de opciones disponibles y a como el usuario interactúa con ellas. Esto se ve reflejado cuando el usuario pasa con el puntero del ratón por sobre las opciones y como las mismas reflejan cambios en el segundo nivel del menú. Esto se puede reproducir perfectamente con este plugin y en apenas unos pasos.

menu desplegable con varios niveles jquery

Si nosotros mismos nos decidimos a diseñar nuestro propio menú de dos niveles el principal problema con el que vamos a encontrarnos es el relacionado a los timeouts y posibles demoras a la hora de representar las nuevas opciones cuando el usuario interactúa con el primer nivel, esto ofrece una pobre experiencia al usuario, gracias a este plugin todos estos detalles están perfectamente contemplados y solucionados.

El plugin si bien es muy potente no hace todo automático, no obstante la propuesta es simple, tener el control sobre como el usuario opera con las distintas opciones, esto se ve reflejado en la estructura básica de uso del plugin, que es la siguiente:

$("#menu").menuAim({
     activate: $.noop,  // Dispara una acción al activarse
     deactivate: $.noop,  // Dispara una acción al desactivarse
 });

Como pueden apreciar hay dos instancias posibles sobre cada fila, una que corresponde a la fila activa y otra a la fila desactivada, cada uno de estos estados dispara una acción distinta que nosotros mismos definimos.

Modo de uso:

.menuAim({
     // Llamamos esta función cuando se activa una fila
     // ideal para mostrar el submenu secundario.
     activate: function() {},

     // Llama una función cuando se desactiva la fila.
     deactivate: function() {},

     // Función que detecta cuando el usuario ingresa a una opción (mouse).
     enter: function() {},

     // Función que detecta cuando el mouse abandona la opción.
     exit: function() {},

     // Dispara un evento según el elemento según la jerarquía del documento
     // por defecto es: "> li".
     rowSelector: "> li",

     // Opción para filtrar elementos.
     submenuSelector: "*"
 });

Este ejemplo es más complejo y muestra más opciones para controlar la forma en que el usuario interactúa con el menú.

Si están interesados en este plugin los invito a descargar el código fuente completo, en el archivo comprimido van a encontrar un ejemplo de uso y más información sobre como utilizar este magnifico recurso.

Web: jQuery Menu Aim

Categorizado en: