Animare l’icona del menu hamburger può essere fatto usando solo HTML e CSS. Potrebbe essere necessario utilizzare JavaScript o jQuery per appendere una classe a questo menu quando viene cliccato (così potrebbe innescare la transizione), ma qui ci concentreremo solo sulle animazioni CSS.
Ecco un esempio base di codice CSS per un’animazione di un’icona del menu hamburger:
HTML:
```
```
CSS:
```
/* Posizionamento del menu hamburger */
.hamburger-menu {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 2rem;
height: 2rem;
padding: 1rem;
cursor: pointer;
transition: all 0.3s linear;
}
/* Stile delle linee del menu */
.hamburger-menu .line {
width: 2rem;
height: 0.25rem;
background-color: #333;
transition: all 0.3s linear;
}
/* Trasformazione delle linee quando il menu è attivo */
.hamburger-menu.active .line-1 {
transform: translateY(0.75rem) rotate(45deg);
}
.hamburger-menu.active .line-2 {
opacity: 0;
}
.hamburger-menu.active .line-3 {
transform: translateY(-0.75rem) rotate(-45deg);
}
```
In questo esempio, il menu hamburger ha tre linee. Quando il menu è attivo (cioè quando la classe ‘.active’ è stata aggiunta al menu), la prima e la terza linea ruotano di 45 gradi in direzioni opposte e si muovono verso il centro, creando una forma di “X”. La seconda linea diventa trasparente, completando l’effetto di animazione. Nota che questo codice non coinvolge l’aggiunta della classe ‘active’, cosa che dovrebbe essere fatta con JavaScript o jQuery.
