Burger Menü (oder Hamburger-Menü) ist eine beliebte Möglichkeit, das Navigationsmenü einer Website anzuzeigen. Es hat seinen Namen wegen seiner Ähnlichkeit mit einem Burger bekommen: drei horizontale Linien, die einem Brötchen, einem Fleischschnitzel und einem oberen Brötchen ähneln. Ein Menü-Burger wird normalerweise auf mobilen Geräten verwendet, um ein großes Navigationsmenü auszublenden und Platz auf dem Bildschirm zu schaffen.
Erstellen eines Menü-Burger mit CSS ist eine der einfachsten Möglichkeiten, diese Funktion auf Ihrer Website zu implementieren. Sie benötigen nur ein paar Zeilen CSS-Code und etwas HTML, um dies zu tun.
Die Basis eines Menü-Burger sind drei horizontale Linien, die mit dem Pseudo-Element ::before und nach dem Pseudo-Element ::after erstellt werden können. Wenn Sie dann auf den Menü-Burger-Button klicken, werden die Linienstile so geändert, dass sie ein Kreuzzeichen bilden. Das Navigationsmenü wird ausgeblendet oder angezeigt.
Ein einfaches Beispiel für ein Burger-Menü mit CSS
Webentwickler verwenden häufig Burgermenüs, um eine kompakte und bequeme Möglichkeit zu schaffen, auf einer Website zu navigieren. Ein Burger-Menü ist eine Liste, die zunächst ausgeblendet ist und beim Klicken auf eine Schaltfläche sichtbar wird (normalerweise ist dies das Hamburger-Symbol). In diesem Beispiel implementieren wir ein Burger-Menü mit CSS.
-
(liste der Menüelemente). Wir verwenden auch die Pseudoklasse :hover , um einen Effekt hinzuzufügen, wenn Sie den Mauszeiger über Menüelemente bewegen.
Der folgende CSS-Code fügt unserem Burger-Menü Stile hinzu:
#burger-menu #burger-menu span #burger-menu ul #burger-menu ul li #burger-menu ul li a #burger-menu:hover ul
-
wenn Sie den Mauszeiger über das Menü bewegen. Dies ist der Hauptmechanismus, auf dem das Burger-Menü aufgebaut ist.
Was ist ein Burger-Menü im Webdesign
Der Hauptvorteil des Burgermenüs ist, dass es Platz auf dem Bildschirm des Geräts spart, insbesondere bei Smartphones und Tablets mit kleinen Bildschirmen. Wenn der Benutzer auf das Burger-Symbol klickt, öffnet sich ein Menüfenster, das Links zu verschiedenen Abschnitten oder Seiten der Website enthält. Nach Auswahl eines Menüpunkts wird die Leiste geschlossen und der Benutzer kann die Website weiterhin nutzen.
Burger-Menüs werden durch traditionelle horizontale Menüs ersetzt, die viel Platz auf dem Bildschirm einnehmen und für die Navigation auf mobilen Geräten schwierig sein können. Dank des Burgermenüs können Benutzer schnell und einfach die gewünschten Bereiche der Website finden, ohne viel Zeit mit der Suche aufwenden zu müssen.
Das Erstellen eines Burgermenüs mit CSS ist einfach genug und erfordert nur ein paar Zeilen Code. Dies ermöglicht es Webdesignern, schnell und einfach Burgermenüs zu ihren Websites hinzuzufügen, wodurch sie besonders in mobilen Varianten benutzerfreundlicher werden.
Vorteile der Verwendung eines Burgermenüs
- Platzsparend: Mit dem Burger-Menü können Sie viele Abschnitte auf der Website platzsparend platzieren und Platz für andere wichtige Elemente schaffen.
- Verbesserte Navigation: Mit dem Burger-Menü können Sie viele Links und Seiten in einem einzigen Menü gruppieren, wodurch die Navigation auf der Website für die Benutzer einfacher und intuitiver wird.
- Mobile Anpassungsfähigkeit: Das Burger-Menü ist die ideale Lösung für mobile Geräte, da es Ihnen ermöglicht, Menüs zu minimieren und Platz auf dem Bildschirm Ihres Smartphones oder Tablets zu sparen.
- Ästhetische Anziehungskraft: ein Burger-Menü kann zu einem stilvollen und modernen Element des Website-Designs werden, das die Aufmerksamkeit der Nutzer auf sich zieht und einen positiven Eindruck vermittelt.
- Benutzerfreundlichkeit: Ein Burger-Menü wird normalerweise als Dreifach- oder Symbol angezeigt, das von Benutzern leicht erkannt und verwendet wird.
Insgesamt ist die Verwendung eines Burgermenüs eine einfache und effektive Möglichkeit, die Benutzeroberfläche zu verbessern und die Website für verschiedene Geräte zu optimieren.
Wie erstelle ich ein Burger-Menü mit CSS
Im Folgenden sind die Schritte aufgeführt, um ein einfaches Beispiel für ein Burger-Menü zu erstellen:
- Erstellen Sie ein Element mit der Burger-Icon-Klasse, das das Burger-Symbol darstellt. zum Beispiel: .
- Fügen Sie CSS-Stile für die Burger-Icon-Klasse hinzu, um ein Burger-Symbol zu erstellen. Zum Beispiel:
document.querySelector('.burger-icon').addEventListener('click', function() );
.show
Jetzt sollten Sie ein funktionelles Burger-Menü auf Ihrer Website haben. Möglicherweise müssen Sie auch zusätzliche Stile für die Animation hinzufügen und ihr Aussehen verbessern. Dies war nur ein einfaches Beispiel und Sie können es nach Belieben anpassen.
Beispielcode zum Erstellen eines Burgermenüs
Hier ist ein einfaches CSS-Beispielcode zum Erstellen eines Burgermenüs:
/* Основные стили для бургер-меню */.burger-menu /* Стили для иконки бургер-меню */.burger-icon .burger-icon span /* Стили для списка меню */.burger-menu ul .burger-menu ul li .burger-menu ul li a /* Анимация для отображения/скрытия меню */.show-menu .burger-icon span:nth-child(1) .show-menu .burger-icon span:nth-child(2) .show-menu .burger-icon span:nth-child(3)
Dies ist nur der Hauptcode, um ein Burger-Menü zu erstellen. Sie können die Stile ändern und auf Ihr Projekt anwenden.
Wie füge ich Animationen zu einem Burger-Menü mit CSS hinzu
Sie können verschiedene Methoden wie Übergänge, Transformationen und Animationen verwenden, um dem Burger-Menü mithilfe von CSS Animationen hinzuzufügen. Hier ist ein Beispiel für ein einfaches Burger-Menü mit Animationen:
Um eine Animation in diesem Beispiel hinzuzufügen, verwenden wir die Eigenschaft transform für einen reibungslosen Wechsel des Burgermenüs:
In diesem CSS-Code verwenden wir den Selektor :checked, um den Status des Burgermenüs zu bestimmen. Wenn Sie darauf klicken, werden die Animationseigenschaften für jedes der einzelnen Elemente des Burgermenüs geändert, was einen Animationseffekt erzeugt.
Wenn Sie also einen ähnlichen Code verwenden und Stile anpassen, können Sie dem Burgermenü ganz einfach Animationen hinzufügen und eine interaktive und ansprechende Benutzeroberfläche für die Benutzer erstellen.
