Drei Streifen sollten so einfach zu zeichnen sein. Hier sind eine Reihe verschiedener Wege, dies im Web zu tun. Nichtsdestotrotz ist SVG definitiv der schönste Weg, damit umzugehen. Ein Hamburger-Menü ist so einfach, dass wir es von Hand in SVG zeichnen können.
Drei Rechtecke, gleichmäßig verteilt
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>Spielen Sie gerne mit diesen Zahlen herum, um die gewünschte Größe und den gewünschten Stil zu erhalten.
Etwas Tolles, das Sie vielleicht nicht wissen? SVG hat abgerundete Ecken, genau wie CSS border-radius! Es kommt in Form des Attributs rx. Schauen Sie es sich an
Das funktioniert für Ihr Design vielleicht besser, wenn Ihr Design weicher ist und abgerundete Elemente verwendet.
Ich würde das erste (ohne abgerundete Enden) mit einem
line-Element codieren, was zu einer.svg-Datei mit weniger als150Byte führt (einschließlich desxmlns-Attributs)Das zweite (abgerundete Enden) kann mit einem einzigen
pathcodiert werden (das 3 horizontaleh-Linien zeichnet, die praktisch die gesamte Breite des Viewports abzüglich der Strichstärke lang sind)Ich mache normalerweise ein Hamburger-Menü mit einem
(oder ) und einigen ::before und ::after mit oberen und unteren Rändern. Dies erleichtert auch die Animation in ein X-Symbol, falls gewünscht. Und mit einfacher meine ich, dass CSS-Übergänge anstelle von SVG-Animationen verwendet werden können.
Vielen Dank für dieses großartige Code-Stück. Ich habe kürzlich das WordPress-Theme 2022 installiert. Ich konnte das Standard-Hamburger-Symbol mit 2 Linien nicht ohne ein Plugin in 3 Linien ändern. Ich habe die Website mit dem Chrome-Browser inspiziert, Ihren Code kopiert und eingefügt, und siehe da, es hat funktioniert.
Eine Frage. Wie kann ich den Text „Menü“ nach dem Button hinzufügen?
Vielen Dank.