Wie erstellt man: Menüsymbol

Lernen Sie, wie man mit CSS ein Menüsymbol erstellt.

Wenn Sie keine Symbolbibliothek verwenden, können Sie mit CSS ein grundlegendes Menüsymbol erstellen:

Menüsymbol:

Probieren Sie es selbst aus

Animiertes Menüsymbol (klicken Sie darauf):

Probieren Sie es selbst aus

Wie erstellt man ein Menüsymbol

Erster Schritt - Hinzufügen von HTML:

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

Zweiter Schritt - Hinzufügen von CSS:

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

Probieren Sie es selbst aus

Beispiel Erklärung:

width und height Attribute spezifizieren die Breite und Höhe jeder Leiste.

Wir haben eine schwarze Hintergrundfarbe und die Außenabstände oben und unten hinzugefügt, um den Abstand zwischen jeder Leiste zu erstellen.

Animationssymbol

Verwenden Sie CSS und JavaScript, um das Menüsymbol bei Klick in ein 'Abbrechen/Entfernen'-Symbol zu ändern:

Erster Schritt - Hinzufügen von HTML:

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

Zweiter Schritt - Hinzufügen von CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Drehen Sie den ersten Balken */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Blenden Sie den zweiten Balken aus */
.change .bar2 {opacity: 0;}
/* Drehen Sie den letzten Balken */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Dritter Schritt - Hinzufügen von JavaScript:

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

Probieren Sie es selbst aus

Beispiel Erklärung:

HTML und CSS: Wir haben die gleiche Stil verwendet wie zuvor, aber这次 wir haben einen Container-Element für jeden <div>-Element verpackt und jeder Element eine Klasse zugewiesen.

Das Container-Element wird verwendet, um ein Zeiger-Symbol anzuzeigen, wenn der Benutzer den Mauszeiger auf die divs (Linien) bewegt. Wenn es geklickt wird, führt es eine JavaScript-Funktion aus, die einer neuen Klasse hinzufügt, die den Stil jeder horizontalen Linie ändert: Die erste und letzte Linie wird in das Alphabet 'x' umgeformt und gedreht. Die mittleren Linien werden allmählich ausgeblendet und unsichtbar.