Checkbox para crear un menu responsive sin JavaScript

El reciente cambio que anunció Google en su nuevo algoritmo de búsqueda que modificará el ránking de los resultados de consultas al buscados realizadas a través del móvil hace que la adaptación de nuestra web a “mobile friendly” sea, si no lo era ya, de vital importancia. A partir de ahora, aparecerán en primer lugar las páginas adaptadas para smartphones. Y es por eso que uno de los aspectos que requiere esta adaptación es la correcta implantación de todos los elementos de la web.

Uno de los elementos que mayor importancia tienen es el botón de menú, el cual resume todas las secciones que nuestra web posee. Habitualmente estamos acostumbrados a que estas secciones aparezcan en el header de nuestra web y que según escalamos la página, se conviertan en tres líneas, las cuales todo el mundo identifica ya como icono del menu responsive.

El dropdown menú para conseguir que se despliegue y sea visible requiere normalmente de JavaSript. Gracias a este truco que os mostramos podréis crear un menu dropdown 100% responsive y funcional mediante una simple etiqueta checkbox y su pseudo-clase :cheked.

Necesitamos del siguiente código para crearlo:

– En el html, necesitamos una etiqueta label que contenta la imagen o icono que deseamos para nuestro menu responsive. En este caso el botón lo hemos creado mediante css y html.

<label for="menu-toggle">
	<div class="boton">
		<span></span>
		<span></span>
		<span></span>
	</div>
	</label>
	<input type="checkbox" id="menu-toggle"/>
	<ul id="menu">
	  <li><a href="#">First link</a></li>
	  <li><a href="#">Second link</a></li>
	  <li><a href="#">Third link</a></li>
	</ul>

– Para nuestro css este sería el código:

.boton {
	margin: 0 auto;
	display: block;
	width: 40px;
	height: 36px;
	padding: 10px;
	border-radius: 7px;
	background: #666;
	color: white;
	cursor: pointer;
	position: relative;
}

.boton span {
	display: block;
	width: 40px;
	height: 4px;
	background: white;
	margin-top:7px;
}

label {
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
  text-align: center;
  background: white;
  padding:10px 0;
}

#menu li a {
	color: black;
	padding: 10px 0;
	display: block;
}
#menu-toggle:checked + #menu {
  display: block;
}

El truco consiste en disfrazar una caja checkbox con nuestro estilo personalizado para que despliegue el menu.

La manera en funciona es simple, la etiqueta label está asociada al checkbox mediante el for y la id, para que cuando hagas click en ella, marca o desmarca nuestra checkbox . En nuestro css le daremos una regla que solo se aplique cuando el checkbox se encuentre marcado, pudiendo así tener control sobre el estado del menú. Si deseas que el menú aparezca desplegado y al pulsar el icono de pliegue, solo tendrás que hacer que la etiqueta checkbox aparezca marcada por defecto con el siguiente código

<input type="checkbox" id="menu-toggle" checked/>

Además al tratarse de un truco puramente HMTL5&CSS3 se puede implementar en WordPress, Joomla o cualquier cms bajo el que se desarrolle tu proyecto web.

¿Qué te ha parecido este truco?
Si necesitas adaptar tu web a los nuevos cambios que Google ha incorporado te echamos una mano con ellos.

¿Te ha gustado el artículo?
1 Star2 Stars3 Stars4 Stars5 Stars (3 votos, promedio: 4,67 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

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



Aún no hay comentarios en esta entrada. ¿Te animas?