En este post aprenderemos a hacer un botón para un menú hamburguesa que cambiará de icono entre las clásicas tres rayitas y un aspa (vamos, una "X") alternativamente cada vez que hagamos clic.
Aquí puedes verlo en acción para que te hagas una idea:
Y todo esto sin usar imágenes ni JavaScript. ¿Magia? ¿Brujería? No, CSS.
De hecho, este botón lo podríamos aprovechar para usarlo con este menú escamoteable, también sin JavaScript, que ya vimos en otro post.
Este botón, en realidad, no es un botón. Usaremos un input del tipo check para "guardar el estado" y su label para mostrar los iconos.
¿Cómo va a funcionar este botón?
El plan es este:
-
Gracias al seudoelemento :checked sabremos si el input está marcado o no
-
Con los seudoelementos :before y :after de su label construiremos las tres rayas
-
Por defecto estarán las tres rayas, y si el input está :checked se convertirán en un aspa
Pasamos a construirlo con HMTL y CSS
Este sería el HTML de nuestro botón:
<input id="abrir-cerrar" name="abrir-cerrar" type="checkbox" value="" />
<label for="abrir-cerrar" class="toggle-button"></label>
A través de CSS escondemos el input y le damos estilos al label:
input#abrir-cerrar {
visibility:hidden;
position: absolute;
top: -9999px;
}
.toggle-button {
display:block;
width:50px;
height:50px;
border:1px solid black;
position:relative;
cursor: pointer;
box-sizing: border-box;
}
Ahora nos toca retocar los seudoelementos :before y :after del label para dibujar las tres rayitas.
Al :before le asignamos aproximadamente una altura de 1/4 del total de la altura del label y usamos el borde superior e inferior. En el :after simplemente le damos una altura de 1 px y nos apoyamos en su color de fondo.
Además, a ambos le aplicamos ya una transición para que el cambio de estado sea suave:
.toggle-button:before, .toggle-button:after {
position:absolute;
display:block;
content:" ";
width: calc(100% / 2);
box-sizing: border-box;
left: calc(100% / 4);
transition: all 0.2s ease-out;
}
.toggle-button:before {
top: calc(100% / 4);
height:calc(100% / 4);
border-top:1px solid black;
border-bottom:1px solid black;
background-color: transparent;
}
.toggle-button:after {
height:1px;
background-color:black;
bottom:calc(100% / 4);
}
El comportamiento del botón
Un pequeño recordatorio: las buenas prácticas aconsejan que el comportamiento se maneje siempre con JavaScript, pero el objeto de este post es mostrar la posibilidad de hacerlo simplemente con CSS. Usa este ejemplo bajo tu responsabilidad.
Cuando el input está :checked (o sea, hemos hecho clic sobre él), modificamos el :after y le damos una altura de 1 px y color de fondo como el del :before, les aplicamos una transformación para girarlos 45º en distinto sentido y los posicionamos centrados verticalmente:
input#abrir-cerrar:checked + .toggle-button:before, input#abrir-cerrar:checked + .toggle-button:after {
top:calc(100% / 2);
height:1px;
border-bottom:0;
}
input#abrir-cerrar:checked + .toggle-button:before {
transform: rotate(45deg);
}
input#abrir-cerrar:checked + .toggle-button:after {
transform: rotate(-45deg);
}
Cabe decir que podríamos hacer una versión más sencilla con dos rayas en vez de tres si al :before le aplicamos por defecto una altura de 1 px y color de fondo como en el :after.
Adicionalmente, podemos introducir un par de span dentro del label que nos ayudarán a mostrar un tooltip y mejoraremos la accesibilidad.
Nuestro HTML quedaría finalmente así:
<input id="abrir-cerrar" name="abrir-cerrar" type="checkbox" value="" />
<label for="abrir-cerrar" class="toggle-button">
<span class="cerrar" title="Cerrar">Cerrar</span>
<span class="abrir" title="Abrir">Abrir</span>
</label>
Junto con este CSS para posicionar, mostrar y ocultar los span según nos convenga:
.abrir, .cerrar {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
text-indent: -9999px;
}
.abrir {
display:block;
}
.cerrar {
display:none;
}
input#abrir-cerrar:checked + .toggle-button .abrir {
display:none;
}
input#abrir-cerrar:checked + .toggle-button .cerrar {
display:block;
}
Ejemplo descargable y más allá
Si quieres probar el ejemplo completo, lo puedes descargar en este enlace.
A partir de aquí puedes hacer múltiples variantes a tu gusto o necesidad para adaptarlo al diseño de tu web. Por ejemplo, en vez de mostrar los tooltips del title, podrías mostrar directamente el contenido de los span.
¿Cómo? ¿Que estás empezando con HTML y CSS y no sabes bien como adaptar el ejemplo? No te preocupes, este curso de HTML y CSS se encargará de que entres en la materia con paso firme.
Y si ya sabes HTML y CSS pero lo que quieres es ponerte al día en las últimas técnicas, este otro curso de maquetación web responsive es justo lo que necesitas.
Espero que te resulte útil el ejemplo de este post. Y si tienes dudas o sugerencias, puedes dejarlas en los comentarios.