Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=7abcd746-d504-4a32-9d2e-2b495bd4ffe1

Cómo crear un botón de menú hamburguesa solo con CSS (sin imágenes ni JavaScript)

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.

Pablo Iglesias Pablo Iglesias es diseñador en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias
Archivado en: Desarrollo Web | Trucos

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.