Animar el botón menú SIN JS

CSS Avanzado | Vacío

RP
Ronny Pumaricra Meneses

@ronnypumaricrameneses

Esto lo aprendí de un Truco CSS de Álvaro, y viene bastante bien en este caso.

Es posible vincular un checkbox y un label y reemplazar todo ese código JS, aquí un pequeño ejemplo de cómo sería:

1<input id="toggle" type="checkbox" class="input">
2<label for="toggle" class="button">
3</label>
1.input {
2 display: none;
3}
4.button {
5 display: block;
6 width: 100px;
7 height: 100px;
8 background: red;
9}
10.input:checked + .button {
11 background: yellow
12}

Aquí el ejemplo del botón menú en Codepen

Avatar

Para temas de accesibilidad es un buen truco (principalmente cuando se desactiva el JS de un sitio web), pero no es recomendable abusar de CSS para hacer cosas que deberían ser con JS 😀

Avatar

Escribe una respuesta