Die Seitenleiste ist eine großartige Möglichkeit, die Navigation auf Ihrer Website zu organisieren. Es hilft Benutzern, die gewünschten Abschnitte und Seiten leicht zu finden, insbesondere wenn eine Website eine große Menge an Inhalten enthält. Das Erstellen eines Seitenmenüs in HTML und CSS ist nicht nur funktional, sondern auch ästhetisch ansprechend.
Möchten Sie wissen, wie Sie ein Seitenmenü selbst erstellen können? Sie benötigen keine komplizierte Entwicklung und keine teuren Werkzeuge. Diese Aufgabe kann mit den standardmäßigen Webentwicklungstools HTML und CSS erledigt werden. Egal, ob Sie ein Anfänger oder ein erfahrener Entwickler sind, unsere Schritt-für-Schritt-Anleitung hilft Ihnen, ein effektives und schönes Seitenmenü zu erstellen.
In diesem Artikel werden wir Ihnen die wichtigsten Schritte erklären, die zum Erstellen eines Seitenmenüs in HTML und CSS erforderlich sind. Wir zeigen Ihnen, wie Sie eine grundlegende Menüstruktur erstellen, sie mit CSS-Klassen stilisieren und Animationen hinzufügen, um die Benutzererfahrung zu verbessern. Bereit zu beginnen? Dann lassen Sie uns beginnen, Ihre eigenen Seitenmenüs zu erstellen!
Wie erstelle ich ein Seitenmenü in HTML und CSS?
- Erstellen Sie ein HTML-Element
-
für eine Liste von Menüpunkten.
- Fügen Sie jedem Menüelement ein Element hinzu
- .
- Verwenden Sie CSS, um eine Liste von Menüpunkten zu formatieren.
- Legen Sie die Breite und Höhe des Menüelements fest.
- Fügen Sie Einrückungen und Rahmen hinzu, um einen Rahmen zu erstellen.
- Ändern Sie die Hintergrund- und Textfarbe für eine bessere Sichtbarkeit.
- Fügen Sie Hover-Effekte für aktive Menüpunkte hinzu.
- Verschieben Sie die Seitenleiste mithilfe der CSS-Eigenschaft position an die gewünschte Stelle auf der Seite.
Hier ist ein Beispiel für HTML-Code für ein Seitenmenü:
Und hier ist ein Beispiel für CSS-Code, um das Menü zu stylen:
#sidebar-menu #sidebar-menu li #sidebar-menu li a #sidebar-menu li a:hoverDas Styling und die Positionierung des Seitenmenüs können nach Ihren Wünschen angepasst werden, aber die obigen Schritte stellen die Grundlage für die Erstellung eines Seitenmenüs in HTML und CSS dar.
Schritt 1: Erstellen einer HTML-Struktur
- div - der Container, in den alle Menüelemente eingefügt werden;
- ul - eine ungeordnete Liste, die Menüpunkte enthält;
- li - ein Listenelement, das einen einzelnen Menüpunkt darstellt;
- a - hyperlink, der den Text des Menüelements anzeigt;
Ein HTML-Beispiel zum Erstellen einer grundlegenden Seitenmenüstruktur sieht folgendermaßen aus:
In diesem Beispiel haben wir ` erstellt
- ' mit einer Liste von Menüpunkten. Jeder Menüpunkt ist separat `
- ' ein Listenelement, das einen Hyperlink enthält ", das den Text des Menüelements anzeigt.
Bisher wurde eine HTML-Struktur erstellt, und im nächsten Schritt werden wir Stile hinzufügen, um sie wie eine Seitenleiste aussehen zu lassen.
Schritt 2: Anwenden von CSS-Stilen
`, das Ihre Seitenleiste enthält: `'htmlSpeichern Sie die HTML-Datei und öffnen Sie sie in Ihrem Webbrowser. Jetzt sollten Sie sehen, dass die Seitenleiste CSS-Stile angewendet hat und strukturierter und attraktiver aussieht.
Schritt 3: Interaktivität hinzufügen
Jetzt, da wir die Grundlage für unser Seitenmenü haben, ist es an der Zeit, etwas Interaktivität hinzuzufügen. Wir möchten, dass das Menü ausgeblendet und angezeigt wird, wenn Sie auf eine bestimmte Schaltfläche klicken. Dazu verwenden wir JavaScript. Fügen Sie zuerst eine Schaltfläche hinzu, die für das Öffnen und Schließen des Menüs verantwortlich ist. Dazu innerhalb des Tags
fügen Sie den folgenden Code hinzu:Damit das Menü nun ausgeblendet und angezeigt wird, erstellen wir entsprechende JavaScript-Funktionen. Innerhalb des Tags
// Получаем ссылку на кнопку открытия и закрытия менюvar menuToggle = document.getElementById('menu-toggle');// Получаем ссылку на само менюvar menu = document.getElementById('menu');// Функция для открытия и закрытия менюfunction toggleMenu() // Привязываем функцию к событию нажатия на кнопкуmenuToggle.addEventListener('click', toggleMenu);Wenn Sie nun auf die Schaltfläche "Menü öffnen" klicken, wird die toggleMenu-Funktion aufgerufen und das Menü wird ausgeblendet oder angezeigt. Vergessen Sie nicht, die CSS-Klasse "active" hinzuzufügen, um das geöffnete Menü zu stylen.
