Come fare per - Icona del menu
Scopri come creare un'icona di menu con CSS.
Come creare un'icona di menu
Se non stai utilizzando una libreria di icone, puoi creare un'icona di menu di base con CSS:
Icona del menu:
Icona del menu animato (fai clic su di essa):
Passaggio 1) Aggiungi HTML:
Esempio
<div></div>
<div></div>
<div></div>
Passaggio 2) Aggiungi CSS:
Esempio
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Esempio spiegato
La proprietà width
e height
specifica la larghezza e l'altezza di ciascuna barra.
Abbiamo aggiunto un nero background-color
e la parte superiore e inferiore margin
viene utilizzata per creare una certa distanza tra ciascuna barra.
Icona animata
Usa CSS e JavaScript per cambiare l'icona del menu in un'icona "annulla/rimuovi" quando viene cliccata su:
Passaggio 1) Aggiungi HTML:
Esempio
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Passaggio 2) Aggiungi CSS:
Esempio
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Passaggio 3) Aggiungi JavaScript:
Esempio
function myFunction(x) {
x.classList.toggle("change");
}
Esempio spiegato
HTML e CSS: utilizziamo gli stessi stili di prima, solo che questa volta avvolgiamo un elemento contenitore attorno a ciascun elemento <div> e specifichiamo un nome di classe per ciascuno.
L'elemento contenitore viene utilizzato per mostrare un simbolo di puntatore quando l'utente sposta il mouse sui div (barre). Quando viene cliccato, eseguirà una funzione JavaScript che aggiunge ad essa un nuovo nome di classe, che cambierà gli stili di ogni barra orizzontale: la prima e l'ultima barra vengono trasformate e ruotate alla lettera "x". La barra al centro scompare e diventa invisibile.