Ein Menü-Burger ist eine beliebte Möglichkeit, ein Navigationsmenü auf Webseiten anzuzeigen. Es besteht aus drei horizontalen Balken, die als eine Schaltfläche zum Öffnen und Schließen von Menüs dienen. Erstellen eines Hamburger Menüs mit CSS und React mag auf den ersten Blick kompliziert erscheinen, aber es ist eigentlich ziemlich einfach.
In diesem Tutorial werden wir den schrittweisen Prozess der Erstellung eines Hamburger Menüs untersuchen. Wir beginnen damit, eine Menüstruktur mit HTML und CSS zu erstellen und dann mit der Animation und Implementierung in React zu beginnen.
Um ein Hamburger Menü zu erstellen, benötigen wir eine gewisse Menge an CSS zum Erstellen und Animieren eines Symbols sowie JavaScript oder React zum Hinzufügen von Funktionen zum Öffnen und Schließen eines Menüs, wenn Sie auf ein Symbol klicken. Der React-Ansatz macht es einfach, Ereignisse zu behandeln und den Anwendungsstatus zu aktualisieren, ohne das DOM manuell ändern zu müssen.
Wenn Sie lernen möchten, wie man ein Hamburger-Menü von Grund auf neu erstellt, hilft Ihnen dieser ausführliche Leitfaden, die Grundlagen von CSS und React zu verstehen, und gibt Ihnen eine vollständige Vorstellung davon, wie man ein funktionelles Hamburger-Menü erstellt, das in Ihren Projekten verwendet werden kann.
Was ist ein Menü-Burger und warum wird er benötigt
Das Konzept der Hamburger Menüs ist mit der Entwicklung mobiler Geräte und der Notwendigkeit, ein kompaktes und einfach zu bedienendes Menü zu erstellen, weit verbreitet geworden. Mit dem Menü Burger können Sie Platz auf dem Bildschirm des Geräts sparen, insbesondere auf kleinen Bildschirmen von Smartphones und Tablets.
Häufig verbirgt ein Menü-Burger Navigationselemente wie Links zu Abschnitten einer Website oder zu verschiedenen Seiten einer Webanwendung. Wenn der Benutzer auf das Hamburger-Symbol klickt, öffnet sich das Menü und zeigt die Navigationspunkte an. Dadurch kann der Benutzer schnell und bequem auf verschiedene Bereiche der Website oder Anwendung zugreifen.
Das Hamburger Menü hat auch seine Nachteile. Kritiker argumentieren, dass diese Art der Darstellung von Menüs die Navigation erschwert und es dem Benutzer erschwert, sofort zu verstehen, welche Funktionen verfügbar sind. Ein kompetentes Design und ein klares Hamburger-Symbol können dieses Problem jedoch weniger bemerkbar machen.
Hamburger Menüs viele Webentwickler wählen wegen ihrer ästhetischen Attraktivität und Benutzerfreundlichkeit auf mobilen Geräten. Mit Hilfe von CSS und JavaScript kann das Hamburger Menü an fast jedes Design und jede Funktion angepasst werden.
Schritt 1: Erstellen von Hamburger Icons
| Schritt 1: | Erstellen Sie einen Container für ein Hamburger-Symbol, indem Sie das div-Element mit der Hamburger-Icon-Klasse verwenden. |
| Schritt 2: | Erstellen Sie mit den Span-Elementen drei horizontale Linien, indem Sie die Klassen line-top , line-middle und line-bottom angeben. |
| Schritt 3: | Fügen Sie Stile für Hamburger Symbole hinzu. Legen Sie die Größe und Farbe der Linien sowie die Einrückung zwischen den Linien mithilfe von CSS fest. |
Als Ergebnis sollte Ihr Hamburger-Symbol wie folgt aussehen:
Wenn Sie fertig sind, fahren Sie mit dem zweiten Schritt fort - dem Hinzufügen von Interaktivität zum Hamburger Menü.
Schritt 2: HTML-Markup für das Hamburger-Menü
Um ein Hamburger-Menü zu erstellen, benötigen Sie HTML-Markup. Dazu können Sie Tabellen verwenden, mit denen Sie die Anordnung der Menüelemente leichter steuern können.
Beginnen wir mit der Erstellung eines Hauptcontainers für unser Menü. Erstellen Sie eine Tabelle mit der Klasse "Hamburger-Menü".
Erstellen Sie innerhalb dieser Tabelle zwei Zeilen. Die erste Zeile enthält den Menütitel und die zweite Zeile enthält die Menüelemente selbst.
Erstellen Sie in der ersten Zeile eine Zelle mit der Klasse "menu-heading". Diese Zelle enthält den Texttitel Ihres Menüs.
Erstellen Sie in der zweiten Zeile eine Zelle mit der Klasse "menu-items". Erstellen Sie innerhalb dieser Zelle eine Liste mit Menüelementen. Jedes Menüelement stellt eine Tabellenzelle mit der Klasse "menu-item" dar.
Der innere Inhalt dieser Zellen ist eine Textbeschreibung zu jedem Menüelement.
Beispiel für HTML-Markup für ein Hamburger-Menü:
Меню Главная О нас Услуги Контакты
Nun, da Sie die Grundlage für ein Hamburger–Menü haben, können Sie mit dem nächsten Schritt fortfahren - das Menü mit CSS gestalten.
Schritt 3: CSS-Styling des Hamburgers
Nachdem der Menü-Burger nun konfiguriert und der React-Komponente hinzugefügt wurde, können Sie mit dem Styling mit CSS beginnen.
Der erste Schritt besteht darin, Stile zu erstellen, um den Burger im ursprünglichen, geschlossenen Zustand anzuzeigen. Dazu können Sie für jede Linie bestimmte Größen und Einzüge festlegen, so dass sie horizontal angeordnet sind und den Eindruck eines geschlossenen Hamburger-Symbols vermitteln.
Als nächstes können Sie eine Animation zum Öffnen und Schließen des Hamburgers hinzufügen. Zum Beispiel können Sie CSS-Übergänge verwenden, um den Status jeder Linie reibungslos zu ändern, wenn Sie auf ein Symbol klicken. Beim Öffnen des Hamburgers wird jede Zeile ausgeblendet und beim Schließen erscheint sie.
Sie können auch Stile hinzufügen, damit der Benutzer beim Bewegen des Cursors über den Menü-Hamburger sein Aussehen ändert, damit der Benutzer sieht, dass er darauf klicken kann. Sie können beispielsweise die Farbe der Linien ändern oder eine Animation zum Unterstreichen hinzufügen.
Und der letzte Schritt besteht darin, das Dropdown-Menü zu stylen, das beim Öffnen des Hamburgers angezeigt wird. Hier können Sie die Standard-CSS-Eigenschaften verwenden, um den Hintergrund, die Textfarbe, die Ausrichtung und die Größe anzupassen, um das gewünschte Aussehen und Gefühl zu erzeugen.
Das Styling eines Hamburger Menüs kann sehr flexibel sein und hängt von Ihren Vorlieben und dem Design der App ab. Es ist wichtig, Iterationen von Stilen zu testen, um sicherzustellen, dass der Menü-Burger so aussieht und sich verhält, wie Sie es erwarten.
Schritt 4: Hamburger-Animationseffekte
In diesem Schritt werden wir Animationseffekte zu unserem Burger-Menü hinzufügen. Diese Effekte machen unser Menü interaktiver und attraktiver.
Zuerst erstellen wir eine Klasse .open in der CSS-Datei, die auf unseren Burger angewendet wird, wenn das Menü geöffnet ist. In dieser Klasse legen wir die Stile für den erweiterten Menüzustand fest, z. B. das Drehen des Hamburgers um 90 Grad und das Ausblenden des mittleren Streifens.
Fügen Sie dann die Animation mithilfe der CSS-Eigenschaft hinzu transition. Diese Animation ändert die Stile unseres Hamburgers reibungslos, wenn er aktiviert wird. Wir fügen den Untermenüs auch Animationen hinzu, damit sie beim Öffnen und Schließen des Menüs reibungslos erscheinen und verschwinden.
In der React-Komponente verwenden wir den Status isOpen, um festzustellen, ob ein Menü geöffnet oder geschlossen ist. Wenn wir auf den Burger klicken, ändern wir diesen Zustand und wenden die Klasse an .open zu unserem Burger.
Der vollständige Code für diese Schritte finden Sie in der Codelab-Anwendung.
Glückwunsch! Jetzt haben Sie ein Hamburger-Menü mit Animationseffekten. Sie können es weiter verbessern, verschiedene Stile und Animationen hinzufügen, um es für Ihr Projekt einzigartig zu machen.
Schritt 5: Hinzufügen von React-Funktionalität
Nun, da wir ein grundlegendes Layout erstellt und Stile zu unserem Hamburger-Menü hinzugefügt haben, ist es Zeit, React-Funktionalität hinzuzufügen.
Um zu beginnen, können wir eine BurgerMenu - Komponente erstellen , die den Status des Öffnens und Schließens des Menüs speichert. Dazu verwenden wir den useState-Hook von React.
Innerhalb der BurgerMenu-Komponente können wir eine toggleMenu-Funktion erstellen, die den Wert des Menüöffnungsstatus umschaltet. Wir können diesen Zustand dann in unseren CSS-Stilen verwenden, um die Menüs bei Bedarf ein- und auszublenden.
Außerdem können wir die Map- und Filter-Komponenten aus JavaScript verwenden, um eine dynamische Liste von Menüelementen zu erstellen. Wir können ein Array von Daten an unsere BurgerMenu-Komponente übergeben und jedes Listenelement basierend auf dem Status des Menüs anzeigen.
Schließlich können wir jedem Listenelement Klickereignishandler hinzufügen, um bestimmte Aktionen auszuführen, wenn Sie einen Menüpunkt auswählen. Zum Beispiel können wir den Aktivitätsstatus eines Elements umschalten oder den Benutzer auf eine andere Seite umleiten.
Das ist alles! Jetzt haben wir ein voll ausgestattetes Hamburger-Menü, das mit CSS und React erstellt wurde. Wir können sein Aussehen leicht anpassen und zusätzliche Funktionalität hinzufügen, um es für die Benutzer anpassungsfähig und intuitiv zu machen.
