Wie man ein Menü-Hamburger mit CSS und JavaScript erstellt

Web-Entwicklung ist eine grenzenlose Welt der Möglichkeiten, in der jeder Programmierer etwas Neues und Einzigartiges mitbringen möchte. Eines der beliebtesten Elemente des Webdesigns ist das Hamburger-Menü. Dieses funktionale und stilvolle Element ermöglicht es Ihnen, mobilfreundliche Websites mit minimalem Platzaufwand zu erstellen.

Ein Menü-Hamburger ist ein Symbol, das beim Anklicken eine Liste von Menüpunkten hervorhebt. Dies ist eine großartige Möglichkeit, Platz auf der Seite zu sparen und die Benutzerfreundlichkeit für mobile Benutzer zu verbessern.

Erstellen eines Hamburger Menüs mit CSS und JavaScript mag eine entmutigende Aufgabe sein, aber es ist eigentlich ziemlich einfach. In diesem Artikel werden wir uns ansehen, wie man ein stilvolles und funktionelles Hamburger-Menü mühelos erstellt.

Was ist ein Hamburger-Menü?

Dieses Menü wird häufig für mobile Versionen von Websites verwendet, wenn der begrenzte Platz auf dem Bildschirm nicht zulässt, dass der gesamte Satz von Navigationspunkten in einer geraden Linie angezeigt wird.

Mit dem Menü-Burger können Sie kompaktere und reduzierte Versionen des Menüs erstellen, die auf Wunsch des Benutzers leicht ein- oder ausgeblendet werden können.

In den letzten Jahren hat sich der Menü-Burger zu einem beliebten Webdesigntrend entwickelt und wurde in einer Vielzahl von Websites und Anwendungen weit verbreitet verwendet. Es bietet Benutzerfreundlichkeit und ermöglicht es Ihnen, den ästhetischen Reiz des Designs beizubehalten.

Grundprinzipien der Erstellung eines Hamburger Menüs

Die Grundidee eines Hamburger Menüs besteht darin, die Hauptnavigation auszublenden und sie nur anzuzeigen, wenn Sie auf das Symbol in der oberen Ecke der Seite klicken.

Erstellen eines Hamburger Menüs kann mit CSS und JavaScript erreicht werden. Mit CSS können Sie das Hamburger-Symbol stilisieren und das Hauptmenü ausblenden, während Sie JavaScript verwenden, um Ereignisse zu behandeln und das Menü beim Klicken ein- oder auszublenden.

Grundsätze der Erstellung eines Hamburger Menüs:

• Erstellen Sie ein Hamburger-Symbol mit CSS. Es kann drei horizontale Linien oder ein anderes Symbol sein, das mit einem Hamburger verbunden ist.
• Blenden Sie das Hauptmenü mit CSS aus. Verwenden Sie die Eigenschaft display: none; oder visibility: hidden;, um die Navigation auszublenden.
• Fügen Sie Funktionalität mit JavaScript hinzu. Weisen Sie dem Hamburger-Symbol einen Ereignishandler zu, damit das Menü angezeigt oder ausgeblendet wird, wenn Sie darauf klicken. Dazu können Sie Methoden verwenden .toggle() oder .classList.toggle() zum Hinzufügen oder Entfernen einer Klasse, die die Sichtbarkeit des Menüs steuert.
• Stilisiere das Hamburger-Menü mit CSS. Ändern Sie das Aussehen des Symbols, wenn Sie darauf klicken oder schweben, und fügen Sie Animationen und Übergänge hinzu, um einen attraktiveren visuellen Effekt zu erzielen.

Auswählen eines geeigneten Symbols

Beim Erstellen eines Hamburger Menüs ist es wichtig, ein geeignetes Symbol auszuwählen. Das Symbol sollte dem Benutzer die Informationen über die Menütaste einfach und anschaulich vermitteln.

Beliebte Symbole für Hamburger-Menüs umfassen drei horizontale Linien, die das Minimieren des Menüs in einer einzigen Taste symbolisieren. Dieses Symbol wird gut erkannt und ist mit der Funktion zum Öffnen und Schließen von Menüs verbunden.

Sie können verschiedene Symbole verwenden, abhängig vom Stil Ihrer Website und Ihren Designvorlieben. Zu den beliebten Symbolen gehören drei vertikale Linien, Pfeile oder das Hamburger-Symbol.

Es ist wichtig, ein Symbol auszuwählen, das seine Funktion klar kommuniziert und vom Benutzer leicht erkannt wird. Das Symbol sollte einfach sein und den Benutzern keine Verwirrung bereiten.

Denken Sie daran, dass der Zweck der Verwendung des Hamburger Menüs darin besteht, die Navigation auf der Website oder der App für die Benutzer benutzerfreundlicher und intuitiver zu gestalten.

Verschreiben von Stilen für ein Symbol

Das Menü-Hamburger-Symbol besteht normalerweise aus drei horizontalen Balken, die mit CSS gestylt werden. Um zu beginnen, müssen Sie einen Container für das Symbol erstellen und die Stile dafür verschreiben:

• Legen Sie die Breite und Höhe des Containers fest, um die Größe des Symbols zu bestimmen. Zum Beispiel mit den Eigenschaften width und height.
• Stellen Sie display ein: flex, um dem Symbol und seinen Elementen Flexibilität zu verleihen.
• Legen Sie justify-content: center und align-items: center fest, um die Elemente in der Mitte des Containers zu positionieren.
• Setzen Sie cursor: pointer, um anzuzeigen, dass das Symbol anklickbar ist.

Dann müssen Sie die Stile für die Symbolstreifen verschreiben:

• Legen Sie die Breite und Höhe der Streifen fest, um ihre Größe zu bestimmen. Zum Beispiel mit den Eigenschaften width und height.
• Legen Sie background-color fest, um die Farbe der Streifen festzulegen.
• Stellen Sie den Rand oder das Padding ein, um die Einrückung zwischen den Streifen festzulegen.

Sie können auch Animationen hinzufügen, wenn Sie auf ein Symbol klicken, z. B. indem Sie eine Pseudoklasse verwenden : active oder JavaScript verwenden.

Erstellen einer Animation zum Öffnen und Schließen von Menüs

Um eine Animation zum Öffnen und Schließen eines Menüs im Hamburger-Stil zu erstellen, können wir CSS und JavaScript verwenden. Verwenden Sie CSS-Animationen, um glatte und spektakuläre Übergänge zu erstellen.

Zunächst müssen wir eine Animation erstellen, um das Menü zu öffnen. Dazu fügen wir dem Menücontainer eine "open" -Klasse hinzu, wenn der Benutzer auf das Hamburger-Symbol klickt. Im folgenden Beispielcode wird veranschaulicht, wie eine Animation zum Öffnen eines Menüs erstellt wird:

In diesem Beispiel erstellen wir eine Animation namens "slide-in", die auf die Open-Klasse angewendet wird. Die Animation beginnt an einer Position, die zu 100% nach links verschoben wurde, und springt dann nahtlos ohne Verschiebung zur ursprünglichen Position über.

Nachdem wir nun eine Animation erstellt haben, um das Menü zu öffnen, müssen wir eine Animation zum Schließen hinzufügen. Um dies zu tun, entfernen wir die Klasse "open" aus dem Menücontainer, wenn Sie auf das Hamburger-Symbol klicken. Im folgenden Beispielcode wird veranschaulicht, wie eine Animation zum Schließen eines Menüs erstellt wird:

In diesem Beispiel erstellen wir eine Animation namens "slide-out", die auf die Klasse "close" angewendet wird. Die Animation beginnt an der ursprünglichen Position ohne Verschiebung und wechselt dann nahtlos zu einer Position, die sich um 100% nach links bewegt.

Jetzt haben wir Animationen zum Öffnen und Schließen von Menüs mit CSS. Wir können JavaScript verwenden, um Klassen hinzuzufügen und zu entfernen, um Animationen anzuwenden, wenn Sie auf das Hamburger-Symbol klicken.

Hier ist ein Beispiel für JavaScript-Code:

In diesem Beispiel verwenden wir die classList-Methoden.contains() , classList.remove() und classList.add() , um die Klassen "open" und "close" abhängig vom aktuellen Menüzustand hinzuzufügen oder zu entfernen.

Wenn wir nun auf das Hamburger-Symbol klicken, wird die Animation zum Öffnen oder Schließen des Menüs dank CSS und JavaScript reibungslos angewendet.

Verwenden Sie CSS, um ein Hamburger-Menü zu erstellen

Um ein Hamburger-Menü mit CSS zu erstellen, sollten Sie Selektoren verwenden, um die Stile verschiedener Elemente zu definieren. Um beispielsweise ein Hamburger-Symbol zu erstellen, können Sie das Pseudo-Element ::before oder ::after verwenden und dessen Eigenschaften wie Farbe, Größe und Positionierung definieren.

Sie können die Animation dann verwenden, um einen animierten Effekt zu erzeugen, der das Menü öffnet und schließt. Sie können beispielsweise eine Transformation verwenden, um die Größenänderung und Position von Menüelementen zu animieren.

Sie können auch Pseudoelemente und CSS-Klassen verwenden, um verschiedene Menüzustände zu erstellen, z. B. den offenen und den geschlossenen Zustand. Sie können beispielsweise die Klassen toggled und untoggled verwenden, um Stile und Animationen basierend auf dem Status eines Menüs zu definieren.

Die Verwendung von CSS zum Erstellen eines Hamburger Menüs macht es einfach, das Aussehen und Verhalten des Menüs anzupassen, und macht es vielseitiger und flexibler, da es nicht erforderlich ist, JavaScript zu verwenden, um es zu funktionieren.

Anwenden von CSS-Eigenschaften, um ein Menüsymbol zu erstellen

1. Erstellen Sie eine HTML-Struktur für das Menüsymbol:

2. Wenden Sie Stile auf das Menüsymbol an:

.menu-icon .bar

3. Fügen Sie JavaScript-Code für die Menüsymbolfunktionalität hinzu:

var menuIcon = document.querySelector('.menu-icon');var menu = document.querySelector('.menu');menuIcon.addEventListener('click', function() );

Jetzt haben Sie ein vorgefertigtes Menüsymbol, das Sie auf Ihrer Website verwenden können. Es sieht aus wie drei parallele Balken, und wenn Sie darauf klicken, erscheint ein Dropdown-Menü.

Wenn Sie ein Menüsymbol erstellen, ist es wichtig, die Stile und Anforderungen Ihres Designs zu berücksichtigen, damit es gut mit den übrigen Elementen der Weboberfläche übereinstimmt. Verwenden Sie CSS-Eigenschaften wie Breite, Höhe, Hintergrundfarbe und Einzug, um das Menüsymbol an Ihre Bedürfnisse anzupassen.

Erstellen von Stilen zum Öffnen und Schließen von Menüs

Um eine Animation zum Öffnen und Schließen eines Hamburger-Menüs zu erstellen, müssen wir CSS-Eigenschaften wie transform und transition anwenden. Betrachten wir ein Beispiel für Stile, die für diese Animation verwendet werden können:

• Der erste Schritt besteht darin, eine Klasse zu erstellen .ein Menu-Wrapper, der alle Menüelemente enthält.
• Dann wenden wir die Eigenschaften transform an: translateX(-100%); und transition: transform 0.3s ease-in-out; zu .menu-Wrapper, um das Menü nach links zu verschieben und einen reibungslosen Übergang beim Öffnen und Schließen des Menüs festzulegen.
• Um die Symbole X und Hamburger anzuzeigen, verwenden wir die Pseudoelemente ::before und ::after der Klasse .menu-icon. Hier wenden wir die content-Eigenschaften an: "; , position: absolute; und andere, um Symbole zu stylen.
• Um die Symbole beim Öffnen und Schließen eines Menüs animieren zu lassen, wenden wir die Eigenschaft transition an: transform 0.3s ease-in-out; auf .menu-icon.
• Schließlich fügen wir eine Klasse hinzu, damit der Hintergrund beim Öffnen des Menüs den gesamten Inhalt der Seite in den Schatten stellt .menu-open zu einem Element . Mit dieser Klasse wenden wir die Eigenschaften position: fixed; , top: 0; , left: 0; , width: 100%; und height: 100%; auf das Element an .

Mit diesen Stilen und Klassen können Sie eine Animation zum Öffnen und Schließen des Hamburger-Menüs erstellen, die Ihrer Website schöne und glatte Übergänge hinzufügt.

Beispielcode für ein Hamburger Menü in CSS

Hier ist ein Beispielcode für ein Hamburger Menü in CSS:

Die oben genannten sind die Hauptkomponenten eines Hamburger Menüs, bestehend aus einem Symbol und einem Navigationsmenü. Der HTML-Code erstellt ein div-Element für das Menüsymbol und ein nav-Element für das Menü selbst. Jeder Menüpunkt wird als li-Element mit einem Link dargestellt. Der CSS-Code legt die Stile für jede Menükomponente, deren Animation und das Erscheinungsbild in unterschiedlichen Zuständen fest.