Come creare: icona del menu

Come creare un'icona del menu

Passo 1 - Aggiungi HTML:

<div></div>
<div></div>
<div></div>

Passo 2 - Aggiungi CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Prova a farlo tu stesso

Esempio di spiegazione:

width e height Le proprietà specificano la larghezza e l'altezza di ogni barra.

Abbiamo aggiunto un colore di sfondo nero e margini superiori ed inferiori per creare spazi tra ogni barra.

Icona animata

Utilizzando CSS e JavaScript, cambia l'icona del menu in un'icona di annullamento/eliminazione' quando viene cliccato:

Passo 1 - Aggiungi HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Passo 2 - Aggiungi CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Ruota la prima barra */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Sfuma la seconda barra */
.change .bar2 {opacity: 0;}
/* Ruota l'ultima barra */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Passo 3 - Aggiungi JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

Prova a farlo tu stesso

Esempio di spiegazione:

HTML e CSS: abbiamo utilizzato lo stesso stile del precedente, ma questa volta abbiamo avvolto ogni elemento <div> in un elemento contenitore e assegnato una classe a ciascun elemento.

L'elemento contenitore viene utilizzato per visualizzare un simbolo di puntatore quando l'utente passa il mouse sopra i divs (linee). Quando viene cliccato, esegue una funzione JavaScript che aggiunge una nuova classe, il che cambia lo stile di ogni barra orizzontale: la prima e l'ultima linea vengono deformatte e ruotate in lettera 'x'. Le linee intermedie si attenuano gradualmente e diventano invisibili.