Scopri come creare un icona del menu con i CSS.
Come creare un'icona del menu
Se non si utilizza un libreria di icone, è possibile creare un'icona del menu di base con i CSS:
Icona Menu:
Icona menu animato (click on it) :
Fase 1) Aggiungere HTML:
Esempio
<div></div>
<div></div>
<div></div>Punto 2) Aggiungere CSS:
esempio spiegato
La width e l' height proprietà specifica la larghezza e l'altezza di ciascuna barra.
Abbiamo aggiunto un nero background-color , e la parte superiore e inferiore margin viene utilizzato per creare una certa distanza tra ogni barra.
icona animata
Usare CSS e JavaScript per cambiare l'icona del menu a un "cancel/remove" icona quando si fa clic su:
Fase 1) Aggiungere HTML:
Esempio
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Punto 2) Aggiungere 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) ;
}Fase 3) Aggiungi JavaScript:
esempio spiegato
HTML e CSS: Usiamo gli stessi stili di prima, solo che questa volta, ci avvolgiamo un elemento contenitore intorno ad ogni <div> elemento e specifichiamo un nome di classe per ciascuno.
L'elemento contenitore è utilizzato per visualizzare un simbolo puntatore quando l'utente sposta il mouse sui div (bars) . Quando si fa clic su, si eseguirà una funzione JavaScript che aggiunge un nuovo nome di classe ad esso, che cambierà gli stili di ogni barra orizzontale: la prima e l'ultima barra si trasforma e ruotato alla lettera "x" . La barra nel mezzo svanisce e diventa invisibile.