Gewusst wie: Menüsymbol
Erfahren Sie, wie Sie mit CSS ein Menüsymbol erstellen.
So erstellen Sie ein Menüsymbol
Wenn Sie keine Symbolbibliothek verwenden, können Sie mit CSS ein einfaches Menüsymbol erstellen:
Menüsymbol:
Animiertes Menüsymbol (klicken Sie darauf):
Schritt 1) HTML hinzufügen:
Beispiel
<div></div>
<div></div>
<div></div>
Schritt 2) CSS hinzufügen:
Beispiel
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Beispiel erklärt
Die Eigenschaft width
und gibt die Breite und Höhe jedes Balkens an.height
Wir haben ein schwarzes hinzugefügt background-color
, und die Ober- und Unterseite margin
wird verwendet, um einen gewissen Abstand zwischen den einzelnen Balken zu schaffen.
Animiertes Symbol
Verwenden Sie CSS und JavaScript, um das Menüsymbol in ein "Abbrechen/Entfernen"-Symbol zu ändern, wenn darauf geklickt wird:
Schritt 1) HTML hinzufügen:
Beispiel
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
.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) ;
}
Schritt 3) JavaScript hinzufügen:
Beispiel
function myFunction(x) {
x.classList.toggle("change");
}
Beispiel erklärt
HTML & CSS: Wir verwenden die gleichen Stile wie zuvor, nur dass wir dieses Mal ein Container-Element um jedes <div>-Element wickeln und für jedes einen Klassennamen angeben.
Das Container-Element wird verwendet, um ein Zeigersymbol anzuzeigen, wenn der Benutzer die Maus über die Divs (Balken) bewegt. Wenn darauf geklickt wird, wird eine JavaScript-Funktion ausgeführt, die einen neuen Klassennamen hinzufügt, wodurch die Stile der einzelnen horizontalen Balken geändert werden: Der erste und der letzte Balken werden transformiert und zum Buchstaben "x" gedreht. Der Balken in der Mitte wird ausgeblendet und unsichtbar.