Cómo hacer un menú desplegable para móviles con HTML5 y CSS3 (sin JavaScript)

Muy seguramente has llegado a utilizar bootstrap y jquery para poder realizar un menu completamente responsivo y con el clasico hamburger icon en movil.

Todo esto se puede realizar sin utilizar ninguna linea de código de JavaScript y con puro CSS3. Todo esto esto es posible gracias al pseudo-clase :target.

Primero lo primero, vamos a crear la estructura HTML para el menú.

<nav id="navigation">
	<!--control-menu-->
	<div class="control-menu">
		<a href="#navigation" class="open">
	        abrir
		</a>
		<a href="#" class="close">
		   cerrar
		</a>
	</div><!---control-menu-->
	
	<!--nav-items-->
	<ul class="nav-items">
		<li>
			<a href="#item1">
				<span>item 1</span>
			</a>
		</li>
		<li>
			<a href="#item2">
				<span>item 2</span>
			</a>
		</li>
		<li>
			<a href="#item3">
				<span>item 3</span>
			</a>
		</li>
	</ul>
	<!--nav-items-->
</nav>

Como podrás ver prácticamente existen 2 contenedores principales dentro de la etiqueta nav, los cuales son para colocar los controles para cerrar/abrir los ítems y el contenedor que contiene el listado de los ítems del menú.

Como te mencione anteriormente, toda la magia esta con la pseudo-clase target. ¿Pero como funciona :target?, recordemos que la navegación por medio de anclas funciona por ID´s, el :target se basa en esta lógica de funcionamiento.

Es decir en nuestro ejemplo del menú, vemos que el link con la clase .open hace referencia al id de la etiqueta nav. Por lo que cuando se de click va a generar una url parecida a tudominio.com/#navigation, aquí es donde se activa dicha pseudoclase :target, tal cual se muestra en el siguiente CSS

#navigation:target .nav-items{
    background:red;
}

Es decir todo el .nav-items tendrá un color rojo, cuando la url del sitio sea tudominio.com/#navigation, ya te daras una idea de por donde va la cosa. Gracias a esto, podremos ocultar y mostrar dicho menu, ya sea con un display:none, o poniendo alguna altura de 0/auto y con su respectivo overflow:hidden.

.close {
    display:none;
}

//cuando en la url tenga #nagivation, es decir dimos click en abrir, lo ocultamos
#navigation:target .open{
	display:none;
}

//y mostramos el link para cerrarlo
#navigation:target .close{
	display:block;
}

Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *