Um dein Hamburger-Menüsymbol zu animieren, benötigst du zuerst einmal dein Symbol. Das kann zum Beispiel so aussehen:
HTML:
```html
Jede Linie repräsentiert einen Strich des Hamburger Symbols.
Nun brauchen wir etwas Styling. Ich werde zur Demonstration einfach bleiben.
CSS:
```css
.container {
width: 32px;
height: 20px;
position: relative;
cursor: pointer;
}
.line {
background-color: #000;
height: 2px;
position: absolute;
transition: all 0.3s ease;
}
.line1 {
top: 0px;
width: 32px;
}
.line2 {
top: 9px;
width: 24px;
}
.line3 {
top: 18px;
width: 16px;
}
```
Jetzt zum animierten Teil. Angenommen, wir haben eine Klasse namens “change”, die wir mit JavaScript auf unsere Container-div anwenden werden, sobald auf das Hamburger-Menü geklickt wird.
Hier ist, was wir im CSS hinzufügen werden, um die Animation zu erstellen:
CSS:
```css
.container.change .line1 {
transform: rotate(-45deg) translate(-9px, 6px);
}
.container.change .line2 {
opacity: 0;
}
.container.change .line3 {
transform: rotate(45deg) translate(-8px, -8px);
}
```
Hier rotieren und verschieben wir die erste und die dritte Linie, um ein X zu formen, und die zweite Linie verschwindet. Jetzt ist alles, was noch fehlt, das entsprechende JavaScript, um die Klasse hinzuzufügen oder zu entfernen:
JavaScript:
```javascript
document.querySelector(“.container”).addEventListener(“click”, function() {
this.classList.toggle(“change”);
});
```
Die oben genannten Codeblöcke zeigen, wie man ein einfaches Hamburger-Menüsymbol mit einer Animation erstellt. Beachten Sie, dass Sie die Größen, Farben und Positionen entsprechend anpassen müssen, damit sie zu Ihrem Design passen.
