Para animar un ícono de menú de hamburguesas, necesitaríamos tres barras horizontales y cambiaríamos su posición y orientación en el evento de clic para convertirlas en una X o alguna otra animación.
Vamos a crear una animación simple donde el icono de tres líneas se convierte en una ‘X’ cuando se hace clic.
Aquí hay un ejemplo paso a paso de cómo hacerlo usando HTML y CSS:
HTML:
```html
```
CSS:
```css
/* Estilos globales para el botón y las líneas */
.hamburger {
position: relative;
width: 36px;
height: 24px;
border: none;
background: none;
cursor: pointer;
padding: 0;
margin: 0;
}
.line {
background: #000; /* color de la línea del menú */
height: 2px;
width: 100%;
position: absolute;
transition: all 0.5s; /* tiempo de transición (la animación en sí misma) */
}
.line:nth-child(1) {
top: 0;
}
.line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.line:nth-child(3) {
top: 100%;
transform: translateY(-100%);
}
/* Estilos cuando el menú está “abierto” */
.hamburger.active .line:nth-child(1),
.hamburger.active .line:nth-child(3) {
top: 50%;
width: 0%; /* esconden las líneas superior e inferior */
}
.hamburger.active .line:nth-child(1) {
transform: translateY(-50%) rotate(45deg);
}
.hamburger.active .line:nth-child(3) {
transform: translateY(-50%) rotate(-45deg);
}
```
JQuery:
```javascript
$(“.hamburger”).click(function(){
$(this).toggleClass(“active”);
})
```
Aquí tengo una simple animación de transformar la hamburguesa en una ‘X’. Al hacer clic en el botón `.hamburger`, se añade/elimina una clase `.active` que contiene diferentes estilizaciones y transformaciones para las líneas del icono.
Es necesario usar un poco de JavaScript o jQuery para cambiar la clase del botón en el evento de clic.
