El Bootstrap de Twitter es impresionante. De verdad!. Nos brinda tantas facilidades en un paquete muy bien organizado que es difícil de creer que sea real. Pero… – Sí, siempre hay un pero – tiene algunas fallas. Los contribuyentes están trabajando muy duro para resolverlas, pero mientras tanto tenemos que lidiar con esas pequeñas molestias.

La locura del menú multinevel para móviles

Cuando creamos una aplicación con el Bootstrap, esta maravillosa librería nos ayudará mucho cuando se trata de adaptar el diseño a una plataforma móvil. Un buen ejemplo es la barra de navegación (“nav bar” de ahora en más) que podemos agregar a la parte superior de nuestra aplicación. Van a terminar con una barra de navegación totalmente extendida cuando el navegador sea lo suficientemente amplio y una versión colapsada, comprimida cuando el navegador sea estrecho.

Qué sucede cuando agregamos un menú multinivel? Sólo tomemos un árbol de categoría/subcategoría/producto como ejemplo.

Cuando tocamos en una de las subcategorías (ramas) para ver sus hijos, seremos redireccionados a la página de la subcategoría, si esta tiene el link. Si hemos usado un símbolo cardinal (#) para indicar que el enlace de esa categoría lleva a ninguna parte, la página volverá a cargarse. Intentalo.

Arreglando el árbol

Entonces, cómo podemos hacer para tocar en una subcategoría y que sólo nos muestre sus hijos y no siga un link?

Unas pocas líneas de nuestro amigo, Javascript:

$(document).on('touchstart.dropdown.data-api',
'.dropdown-submenu > a', function (event) {
event.preventDefault();
}

Esto evitará que el navegador siga un link cuando toquemos en una subcategoría. Pero tiene un efecto secudario negativo en mucho navegadores: también bloqueará la visualización de los hijos de la subcategoría.

Para resolver este inconveniente, necesatiremos agregar una clase CSS al elemento li que contenga el a link:

$(document).on('touchstart.dropdown.data-api', '.dropdown-submenu > a', function (event) {
event.preventDefault();
var parent = $(this).parent();
if (parent.hasClass('open')) {
parent.removeClass('open')
} else {
parent.addClass('open');
}
});

Ahora, cuando toquemos en una rama del árbol, el menú nos mostrará la rama hija en lugar de seguir un enlace.

Juan Pablo Genovese

Juan Pablo has been developing software since he was 18 years old. With 16 years of experience and non-stop learning and having worked in companies of different sizes and industries, he turned to Ruby back in 2006. Since then he fell in love with the language and started developing web applications with Rails and scripting everything he could in Ruby. Currently working for Altoros Software Development, he is one of the most experienced Tech Leads in the company. Avid book reader, guitar player and tango dancer.

Twitter LinkedIn