Das Burger-Menü ist eine der beliebtesten und bequemsten Möglichkeiten, die Navigation auf Websites zu organisieren. Es hat seinen Namen von dem Symbol, das ein Bild eines Hamburgers darstellt. Wenn der Benutzer auf dieses Symbol klickt, erscheint ein Dropdown-Menü mit zusätzlichen Navigationsoptionen.
In diesem einfachen Leitfaden werden wir uns ansehen, wie man ein Burger-Menü mit JavaScript erstellt. Sie benötigen keine komplexen Tools oder Frameworks – nur grundlegende Kenntnisse über HTML, CSS und JavaScript.
Das Erstellen eines Burger-Menüs in JavaScript ist extrem einfach und erfordert nicht viel Code. Es ermöglicht Ihnen jedoch, die Navigation auf Ihrer Website zu verbessern und sie benutzerfreundlicher zu machen. Interessiert? Dann fangen wir an!
Beschreibung und Zweck des Burger-Menüs
Das Hauptziel des Burgermenüs ist es, Benutzern die Navigation auf der Website von mobilen Geräten mit einem kleinen Bildschirm zu erleichtern. Anstatt alle Menüpunkte an prominenter Stelle zu platzieren, können Sie sie hinter einem Burger-Symbol verstecken, das weniger Platz einnimmt.
Der Benutzer kann das Burger-Menü nach Belieben öffnen oder schließen, indem er auf das Symbol klickt. Wenn das Menü geöffnet ist, werden die Menüpunkte vertikal angezeigt und der Benutzer kann den gewünschten Eintrag auswählen. Der Benutzer kann das Menü dann schließen, indem er erneut auf das Burger-Symbol klickt oder an eine andere Stelle auf dem Bildschirm klickt.
Die Verwendung des Burger-Menüs ermöglicht es dem Benutzer, den verfügbaren Platz auf dem Bildschirm effizienter zu nutzen und die Benutzererfahrung auf der Website oder in der App zu verbessern.
Schritte zum Erstellen eines Burger-Menüs in JavaScript
Wenn Sie ein Burger-Menü in JavaScript erstellen möchten, führen Sie die folgenden Schritte aus:
1. Erstellen Sie HTML-Markup für das Menü
Erstellen Sie einen Container für Ihr Menü und fügen Sie Listenelemente oder andere Elemente hinzu, die Sie in Ihrem Menü verwenden möchten.
2. Passen Sie die Stile für das Menü an
Verwenden Sie CSS, um das Aussehen Ihres Menüs anzupassen. Bestimmen Sie Größen, Farben, Schriftarten und andere Stile, die Ihren Anforderungen entsprechen.
3. Erstellen Sie eine Funktion zum Öffnen und Schließen von Menüs
Erstellen Sie eine JavaScript-Funktion, die das Menü öffnet und schließt, wenn Sie auf ein Burger-Symbol oder ein anderes Element klicken.
4. Fügen Sie Ereignishandler hinzu
Fügen Sie in Ihrem JavaScript-Code Ereignishandler hinzu, um die Funktion zum Öffnen und Schließen von Menüs bei Bedarf aufzurufen.
5. Überprüfen Sie die Funktion des Menüs
Testen ist ein wichtiger Teil des Entwicklungsprozesses. Stellen Sie sicher, dass Ihr Menü auf verschiedenen Geräten und Bildschirmauflösungen ordnungsgemäß funktioniert.
Wenn Sie diese Schritte befolgen, können Sie Ihr eigenes Burger-Menü in JavaScript erstellen und sein Aussehen und seine Funktionalität nach Ihren Wünschen anpassen.
Erforderliche Dateien verbinden
Um ein Burger-Menü in JavaScript zu erstellen, benötigen wir mehrere Dateien:
- HTML-Datei - in dem das Menü platziert wird. In dieser Datei wird das Haupt-HTML-Markup platziert und der JavaScript-Code wird eingebunden.
- CSS-Datei - in dem die Stile für das Menü definiert werden. Diese Datei wird mit der HTML-Datei verbunden und legt das Aussehen der Menüelemente fest.
- JavaScript-Datei - in dem die Logik des Menüs implementiert wird. In dieser Datei werden die Funktionen und Ereignishandler definiert, die das Menü öffnen und schließen, wenn Sie auf den Burger klicken.
Um diese Dateien in einer HTML-Datei zu verbinden, verwenden wir Tags und :
Beispiel für das Anfügen einer CSS-Datei:
Beispiel für das Anfügen einer JavaScript-Datei:
Platzieren Sie diese Codezeilen in das Tag Ihrer HTML-Datei, um die erforderlichen Dateien an die Seite anzuhängen.
HTML-Markup erstellen
Um ein Burger-Menü in JavaScript zu erstellen, benötigen wir ein HTML-Markup, das die Hauptmenüelemente enthält.
Als Basismenüelement können Sie mit einer bestimmten ID verwenden. Innerhalb dieses Elements können Sie eine Schaltfläche zum Öffnen und Schließen von Menüs sowie die Menüpunkte selbst platzieren. Zum Beispiel:
In diesem Beispiel verwenden wir Elemente, um eine Menüschaltfläche bzw. eine Liste von Menüpunkten zu erstellen. Jeder Menüpunkt wird durch ein Element dargestellt .
Außerdem haben wir die IDs hinzugefügt (id) zum Hauptmenüelement, zur Schaltfläche und zur Liste der Menüpunkte, um später mit JavaScript darauf zuzugreifen.
Auf diese Weise können wir nach dem Erstellen des HTML-Markups mit dem Schreiben von JavaScript-Code für die Funktionalität des Burger-Menüs beginnen.
JavaScript-Code schreiben
Der JavaScript-Code zum Erstellen eines Burger-Menüs kann mit verschiedenen Ansätzen und Techniken geschrieben werden. Ein solcher Ansatz basiert auf Ereignissen und Operationen mit DOM-Elementen. Betrachten Sie den Beispielcode, um ein einfaches Burger-Menü zu erstellen.
Zuerst erstellen wir eine HTML-Struktur für unser Burger-Menü. Unten ist eine Tabelle mit zwei Zeilen und zwei Spalten dargestellt. Die erste Zeile enthält eine Menüschaltfläche und die zweite Zeile enthält ein verstecktes Menü mit Links.
Als nächstes können wir im JavaScript-Code das "click" -Ereignis auf der Menüschaltfläche verwenden, um das Menü ein- und auszublenden. Erstellen Sie eine Funktion, die bei jedem Klick auf die Schaltfläche ausgeführt wird.
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
Hier wählen wir die Menüschaltfläche und die Menüs mit CSS-Selektoren aus und speichern sie in Variablen. Dann fügen wir einen Ereignis-Listener hinzu, um auf die Schaltfläche zu klicken, und rufen innerhalb der Funktion die toggle() -Methode für das Menü auf. Die toggle() -Methode fügt die Show-menu-Klasse hinzu, wenn sie nicht vorhanden ist, und entfernt sie, wenn sie bereits vorhanden ist.
Jetzt müssen wir Stile für die "Show-menu" -Klasse hinzufügen, damit das Menü angezeigt wird. Zum Beispiel können wir den folgenden CSS-Code hinzufügen:
Außerdem können wir dem CSS-Code einige Animationen oder Übergänge hinzufügen, um unser Menü attraktiver zu gestalten.
Mit diesem Ansatz können wir einfach ein einfaches Burger-Menü erstellen, indem wir JavaScript-Code verwenden, um Ereignisse zu behandeln und DOM-Elemente zu verwalten.
