Este sitio web usa cookies, si permanece aquí acepta su uso. Puede leer más sobre el uso de cookies en nuestra política de cookies.

Colapsar menú mobile al hacer click en cualquier enlace

Inicio >> Diseño Web >> Colapsar menú mobile al hacer click en cualquier enlace

Son muchas las webs que basan sus diseños y funcionalidad responsive en Bootstrap.



W3C Validator

Bootstrap es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice.

La personalización de dicho framework ofrece infinitas posibilidades, y por ello es usado por un gran porcentaje de las webs de nueva creación en la actualidad.




Un asunto interesante, es el de personalizar el menú o "nav bar" en dicho framework. Modificando esta misma web, me surgió la duda de cómo cambiar la funcionalidad de la nav-bar-collapse cuando se visualizaba en dispositivos pequeños, para que el menú se cerrase siempre que se pulsase alguna opción, ya que (al ser una página del tipo "one page") consideraba que sería más usable que funcionase así en dichos dispositivos.


Para lograr ésto, yo he hecho lo siguiente:

Primero he añadido una clase (cerrarMenu) a cada enlace del menú dentro de la collapse navbar-collapse.

A continuación, uso este código jQuery para que al pulsar en cada uno de estos enlaces, se produzca el efecto toggle de pulsar el botón del menú:

$(document).ready(function(){
	$(".cerrarMenu").click(function () {
			$('.navbar-toggle').click();
	});
});

En la primera línea, simplemente especificamos que el resto del código se ejecute cuando todo el documento (o web) esté cargada en el navegador.

La siguiente línea, indica que si hacemos "click" en elementos de la clase "cerrarMenu", se ejecute la siguiente función.

Función que simula la funcionalidad hacer "click" en el botón Toggle que abre o cierra el menú.


Conclusión

He estado varios días probando diferentes formas de realizar ésto, y este código es el que mejor resultado da, aunque como todo, hay mil formas de hacerlo.

TAG: Diseño Web
Autor blog Handicode

José M. Villa

Web Developer. Apasionado del diseño web y programación de aplicaciones en entorno servidor con PHP