Das Hamburger-Menü ist ein beliebtes Element des Webdesigns, mit dem Sie das Hauptmenü der Website auf mobilen Geräten ausblenden und anzeigen können, wenn Sie auf das Symbol klicken. Normalerweise erfordert das Erstellen eines Menü-Hamburgers die Verwendung von JavaScript, aber mit CSS können Sie dies tun, ohne Skripte zu verwenden.
Die Grundidee besteht darin, die Checkbox und die Eigenschaft :checked in CSS zu verwenden. Es wird eine versteckte Checkbox erstellt, die als Hamburger-Symbol formatiert ist. Wenn Sie auf das Symbol klicken, ändert sich der Status der Checkbox und mit dem Selektor : checked können Sie den Stil des Menüs ändern.
Pseudoklassen werden verwendet, um ein Hamburger-Menü in CSS zu erstellen :checked und :not(). :checked wählt eine Checkbox aus, wenn sie aktiv ist, und :not() wendet Stile auf ein Element an, wenn es nicht aktiv ist. Wenn Sie auf das Hamburger-Symbol klicken, ändern sich die Status der Checkbox, und mit : checked oder :not() können Sie das Menü der Website ein- oder ausblenden.
Erstellen Sie ein Hamburger-Menü mit nur CSS
Um zu beginnen, erstellen wir einen Wrapper für das Hamburger-Menü mit dem div-Element:
Dann fügen wir drei horizontale Streifen hinzu, die als Hamburger-Symbol dienen:
Als nächstes wenden wir Stile für unsere Elemente an. Um das Hamburger-Menü einzuwickeln, legen Sie die Breite, Höhe und den Hintergrund fest:
width: 30px;
height: 30px;
background-color: #000;
Um ein Hamburger-Symbol aus unseren horizontalen Balken zu erstellen, legen wir die Breite, Höhe, Einzug und Hintergrundfarbe für sie fest:
width: 100%;
height: 3px;
margin-bottom: 5px;
background-color: #fff;
Nun, da wir ein Hamburger Menü haben, fügen wir einige Animationen hinzu, um das Menü reibungslos zu öffnen und zu schließen. Dazu verwenden wir die Pseudoelemente :before und :after:
.hamburger-menu:before, .hamburger-menu:after
content: "";
width: 100%;
height: 3px;
background-color: #fff;
position: absolute;
top: 0;
animation: open 0.5s ease-in-out forwards;
bottom: 0;
animation: open 0.5s ease-in-out forwards;
Das ist alles! Jetzt haben wir ein Hamburger-Menü, das sich öffnet und schließt mit CSS-Animationen. Sie können Stile und Animationen anpassen, damit das Menü anders aussieht und Ihren Bedürfnissen entspricht.
Vorteile von CSS-Hamburger-Menüs ohne JavaScript
Ein CSS-Burger-Menü ohne JavaScript bietet mehrere Vorteile, die es zu einer attraktiven Wahl für Webentwickler machen. Hier sind einige von ihnen:
1. Einfache Implementierung: Einer der Hauptvorteile eines CSS-Menüs ohne JavaScript ist, dass es ohne komplexen Code implementiert werden kann. Nur ein paar Zeilen CSS-Code reichen aus, um ein auffälliges Hamburger-Menü zu erstellen, was es zu einer attraktiven Lösung für Entwickler macht, die schnell ein responsives Menü auf ihrer Website hinzufügen müssen.
2. Erleichtert das Laden der Seite: Da der CSS-Menü-Hamburger ohne JavaScript funktioniert, bedeutet dies, dass kein zusätzliches Skript geladen werden muss. Dadurch wird die Ladezeit der Seite erheblich verkürzt, was die Arbeit mit Seiten auf mobilen Geräten mit langsamer Internetverbindung erleichtert.
3. Verbesserte Leistung: Im Gegensatz zu einem Hamburger-Menü, das mit JavaScript erstellt wurde, erfordert das CSS-Hamburger-Menü keinen zusätzlichen Code, der die Leistung der Website verbessert. Dies ist besonders wichtig bei mobilen Geräten mit begrenzten Ressourcen, bei denen jedes Byte und jede CPU-Schleife einen Unterschied macht.
4. Einfache Einrichtung: CSS-Hamburger Menü bietet viele Möglichkeiten, um das Aussehen eines Menüs anzupassen. Mit CSS-Code können Sie Farbe, Größe, Ausrichtung und viele andere Optionen ändern, um sicherzustellen, dass der Menü-Burger dem Design Ihrer Website entspricht.
5. Unterstützung durch Browser: Das CSS-Hamburger-Menü funktioniert in allen modernen Browsern ohne JavaScript-Unterstützung. Dies bedeutet, dass Sie sicher sein können, dass Ihr Menü problemlos auf allen Geräten und Browsern funktioniert.
Insgesamt zeichnet sich ein CSS-Menü-Burger ohne JavaScript durch einfache Implementierung, verbesserte Leistung und einfache Anpassung aus. Es ist eine effektive Möglichkeit, Ihrer Website ein responsives Menü hinzuzufügen und Benutzern auf mobilen Geräten eine gute Benutzererfahrung zu bieten.
Erforderliche Schritte zum Erstellen eines Hamburger-Menüs in CSS
Um ein Hamburger-Menü in CSS ohne JavaScript zu erstellen, müssen Sie die folgenden Schritte ausführen:
| Schritt 1: | Erstellen Sie eine HTML-Struktur Ihres Menüs. Normalerweise besteht ein Menü-Hamburger aus drei horizontalen Linien, die die Menütaste darstellen. Sie können ein Element oder für jede Linie verwenden und es in einen gemeinsamen Container einfügen. |
| Schritt 2: | Wenden Sie CSS-Stile auf Ihr Menü an, um das gewünschte Erscheinungsbild zu erstellen. Sie können Pseudoklassen verwenden, um eine Animation zu erstellen, wenn Sie den Mauszeiger bewegen oder den Menüstatus ändern. |
| Schritt 3: | Verwenden Sie die CSS-Positionierung, um Ihr Menü auszublenden oder anzuzeigen, wenn Sie auf die Schaltfläche "Hamburger" klicken. Sie können die display-Eigenschaft mit dem Wert none oder block verwenden, um die Sichtbarkeit des Menüs zu steuern. |
| Schritt 4: | Optional können Sie Animationen oder Übergänge zwischen den Menüzuständen hinzufügen, um die Benutzererfahrung interaktiver zu gestalten. |
Wenn Sie diese Schritte befolgen, können Sie einen Menü-Burger nur mit CSS erstellen und ihn ohne JavaScript zu Ihrer Website hinzufügen.
Hinzufügen von Animationen und Styling zum CSS-Hamburger-Menü
Nachdem wir das CSS-Framework erstellt haben -ein Hamburger-Menü ohne JavaScript, können Sie Animationen und Stilisierung hinzufügen, um es für die Benutzer interessanter und attraktiver zu machen.
Animationen können mithilfe von CSS-Transformationen und Übergängen hinzugefügt werden. Zum Beispiel, um ein Hamburger Menü zu animieren, können Sie Elemente drehen und verschieben, wenn Sie auf das Menüsymbol klicken. Wenn Sie auf das Menüsymbol klicken, können Sie die Position und den Drehwinkel der Elemente ändern, um den Eindruck des sich öffnenden Menüs zu erwecken.
Sie können den Elementen des Hamburger Menüs auch eine Stilisierung hinzufügen, damit sie dem Design Ihrer Website entsprechen. Sie können beispielsweise die Farbe und Größe eines Menüsymbols ändern, eine Animation hinzufügen, wenn Sie den Mauszeiger über ein Symbol bewegen, den Hintergrund oder die Farbe der Menüschaltfläche ändern usw. Die Möglichkeiten, ein Hamburger Menü zu gestalten, sind nur durch Ihre Vorstellungskraft und das Thema Ihrer Website begrenzt.
Hinzufügen von Animationen und Styling zum CSS-Hamburger-Menü können Sie ein einzigartiges und attraktives Design erstellen, das die Aufmerksamkeit der Benutzer auf sich zieht und die Benutzererfahrung auf Ihrer Website verbessert.
