Wie man ein Seitenmenü in HTML und CSS erstellt - Schritt für Schritt Anleitung

HTML und CSS sie sind die wichtigsten Werkzeuge zum Erstellen und Stylen von Websites. Eines der beliebtesten Designelemente einer Website ist das Seitenmenü, mit dem Sie die Seite mit Leichtigkeit navigieren können. Wenn Sie lernen möchten, wie Sie ein Seitenmenü mit HTML und CSS erstellen, müssen Sie diese Schritt-für-Schritt-Anleitung befolgen.

Zuerst müssen Sie HTML-Markup für die Seitenleiste erstellen. Dazu können Sie ein Tag (Liste) verwenden, das die Menüelemente enthält. Jedes Menüelement muss in ein Tag (Listenelement) gewickelt werden. Um einem Menüelement Text oder ein Symbol hinzuzufügen, können Sie das Tag (Link) innerhalb des Tags verwenden .

Zweitens müssen Sie der Seitenleiste CSS-Stile hinzufügen. Sie können Stile für Tags definieren und das Erscheinungsbild und die Position auf der Seite ändern. Sie können beispielsweise Breite, Höhe, Hintergrundfarbe, Schriftart und andere Eigenschaften festlegen, um das Menü an Ihre Website anzupassen.

Nachdem Sie nun die Grundlagen zum Erstellen einer Seitenleiste mit HTML und CSS kennen, können Sie weiterhin mit verschiedenen Stilen und Effekten experimentieren, um Ihrer Website Ihren einzigartigen Stil und Ihre Funktionalität hinzuzufügen. Haben Sie keine Angst, verschiedene Optionen auszuprobieren und Änderungen am Code vorzunehmen, um ein kreativeres und beeindruckenderes Menü zu erstellen!

Das passende Design auswählen

Beim Erstellen eines Seitenmenüs in HTML und CSS spielt die Auswahl eines geeigneten Designs eine wichtige Rolle. Das Menüdesign sollte dem Stil und den Zielen Ihrer Website entsprechen.

Hier sind einige Seitenmenüdesignoptionen, die Sie in Betracht ziehen sollten:

• Klassischer Stil: Einfaches und minimalistisches Seitenmenü mit einer Liste von Elementen. Es eignet sich hervorragend für Websites, die Eleganz und Einfachheit des Designs benötigen.
• Symbole und abgekürzte Namen: Dieser Stil verwendet Symbole und abgekürzte Namen für jeden Menüpunkt. Es ist besonders nützlich bei begrenztem Platzbedarf und kann für mobile Geräte sehr praktisch sein.
• Vertikale Registerkarten: Vertikale Tabs sind eine weitere attraktive Option für das Seitenmenüdesign. Sie bieten einfachen Zugriff auf verschiedene Bereiche der Website und können verwendet werden, um eine große Menge an Inhalten zu organisieren.
• Versteckte Menüs: Möglicherweise möchten Sie eine versteckte Seitenleiste verwenden, die angezeigt wird, wenn der Benutzer den Mauszeiger über einen bestimmten Bereich des Bildschirms bewegt oder auf eine bestimmte Schaltfläche klickt.

Die Auswahl des Seitenmenüdesigns hängt von den funktionalen und visuellen Anforderungen Ihrer Website ab. Denken Sie auch daran, die Benutzerfreundlichkeit für den Benutzer und die Kompatibilität mit verschiedenen Geräten zu berücksichtigen.

Markup der Hauptstruktur

Bevor Sie mit der Erstellung eines Seitenmenüs beginnen, müssen Sie die grundlegende Struktur der Webseite erstellen. Dazu verwenden wir HTML-Markup.

Zunächst erstellen wir einen Container für die gesamte Seite mit einem Tag . Dieser Container enthält unser Seitenmenü und den Hauptinhalt der Seite.

Als nächstes erstellen wir zwei Container innerhalb des Hauptcontainers: einen Container für die Seitenleiste und einen Container für den Hauptinhalt der Seite.

. Erstellen Sie eine Liste mit Menüpunkten. Jeder Menüpunkt wird durch ein Tag dargestellt . Jeder Menüpunkt hat seinen eigenen Text und einen Link zum entsprechenden Abschnitt der Seite.

Im Container für den Hauptinhalt der Seite können wir alle Inhalte, die im Hauptteil der Seite sichtbar sind, außerhalb des Seitenmenüs platzieren.

Hier ist das grundlegende Markup der Seitenstruktur:

In diesem Beispiel haben wir einen Hauptcontainer mit der ID "container" erstellt. Innerhalb dieses Containers haben wir einen Container für das Seitenmenü mit der ID "sidebar" und einen Container für den Hauptinhalt mit der ID "content" hinzugefügt.

und fügte mehrere Menüpunkte mit einem Tag hinzu . Jeder Menüpunkt wird durch einen Link zu einem entsprechenden Abschnitt der Seite dargestellt.

Innerhalb des Containers für den Hauptinhalt haben wir mehrere Überschriften und Absätze hinzugefügt

, die die verschiedenen Abschnitte der Seite darstellen.

Dies ist das grundlegende Markup der Seitenstruktur, auf der wir unser Seitenmenü aufbauen werden. Dann können wir Stile und Funktionen hinzufügen, um Interaktivität und visuelles Design zu schaffen.

Erstellen eines einfachen Menüstils

Erstellen wir zunächst die Grundstruktur unseres Seitenmenüs:

1. Erstellen Sie einen Container für das Menü mit einem Tag . Legen Sie die Menu-container-Klasse für ihn fest.
2. Erstellen Sie innerhalb des Containers eine Liste mit einem Tag . Legen Sie die Menu-List-Klasse darauf fest.
3. Fügen Sie mehrere Menüpunkte mithilfe eines Tags hinzu
4. . Geben Sie jedem Element eine eindeutige Klasse mit dem Präfix menu-item an.
5. Fügen Sie den Text, der im Menüpunkt angezeigt wird, in das Tag ein
6. .

Jetzt erstellen wir einen grundlegenden Stil für unser Menü:

1. Legen Sie den Stil für den Menücontainer mithilfe der Klasse fest .menu-container : Legen Sie die Breite, Höhe und Hintergrundfarbe fest.
2. Legen Sie den Stil für die Menüliste mithilfe der Klasse fest .menu-list : legen Sie den Einzug fest und entfernen Sie die Listenpunktmarkierungen.
3. Legen Sie den Stil für die Menüelemente mithilfe von Klassen fest .menu-item : Legen Sie die Höhe, den Einzug und die Farbe des Textes fest.

Hinzufügen von Stil- und Skriptdateien

Um ein stilvolles und interaktives Seitenmenü zu erstellen, benötigen wir CSS-Stildateien und JavaScript-Skripte.

Zuerst erstellen wir eine CSS-Datei, in der wir die Stile für unsere Seitenmenüs definieren. Erstellen Sie eine neue Datei mit der Erweiterung ".css" und nenne es zum Beispiel "style.css".

Als nächstes öffnen Sie die erstellte Style-Datei.css" in einem Texteditor und fügen Sie den folgenden Code hinzu:

.sidebar .sidebar ul .sidebar ul li .sidebar ul li a .sidebar ul li:hover

Dieser Code definiert die Stile für den Container für Seitenmenüs, Listen, Menüelemente und Links. Sie können diese Stile nach Ihren Bedürfnissen ändern.

Speichern Sie die Style-Datei.css" und schließe es.

Jetzt bleibt es übrig, Skripte hinzuzufügen, um mit dem Seitenmenü zu arbeiten. Erstellen Sie dazu eine neue Datei mit der Erweiterung. "js" und nenne es zum Beispiel "script.js".

Öffnen Sie die Script-Datei.js" in einem Texteditor und fügen Sie den folgenden Code hinzu:

const sidebarToggle = document.querySelector('.sidebar-toggle');const sidebar = document.querySelector('.sidebar');sidebarToggle.addEventListener('click', () => else >);

Dieser Code definiert die Funktion, die ausgeführt wird, wenn Sie auf die Umschalttaste des Seitenmenüs klicken. Wenn das Seitenmenü geschlossen ist (die linke Position beträgt -250 Pixel), wird es geöffnet, indem die linke Position auf 0 gesetzt wird. Andernfalls wird die Seitenleiste geschlossen und die linke Position auf -250 Pixel eingestellt.

Speichern Sie die Script-Datei.js" und schließe es.

Jetzt haben wir CSS- und JavaScript-Stylesheets für unsere Seitenmenüs erstellt. Als nächstes fügen wir diese Dateien in unser HTML-Dokument ein.

Schreiben von CSS-Code für die Seitenleiste

Um ein Seitenmenü mit HTML und CSS zu erstellen, müssen wir zuerst die Stile für unser Menü festlegen. Im Folgenden finden Sie ein Beispiel für CSS-Code, mit dem Sie ein Seitenmenü stylen können:

.menu .menu ul .menu li .menu li a .menu li a:hover .menu .active

Im obigen Code legen wir zuerst die Stile für den Hauptmenücontainer (.menu). Wir stellen die Hintergrundfarbe ein, fügen einen Rahmen rechts hinzu, legen eine feste Positionierung fest, geben die Breite und Höhe des Menüs an und stellen es oben links auf der Seite ein.

Dann legen wir die Stile für die Liste der Menüelemente fest (.menu ul). Wir setzen fehlende Listenmarkierungen ein, setzen Einrückungen und Einrückungen zurück.

Für jedes Listenelement (.menu li), legen wir die Einrückung fest und stilisieren die Links (.menu li a). Wir setzen keine Unterstreichung, legen die Textfarbe fest und legen den Stil fest, wenn Sie den Mauszeiger über den Link bewegen.

Schließlich wenden wir Stil an .aktiv zum aktuell aktiven Menüelement. Dadurch können wir die aktuell ausgewählte Seite visuell im Menü anzeigen.

Erstellen von Animationen und Effekten

Das Hinzufügen von Animationen und Effekten zu einer Seitenleiste wird dazu beitragen, dass es attraktiver und interaktiver wird. Hier sind einige Möglichkeiten zum Erstellen von Animationen und Effekten:

• Verwenden von CSS transitions: Das Hinzufügen von fließenden Übergängen zwischen den Zuständen von Menüelementen kann es noch spektakulärer machen. Dazu können Sie die transition-Eigenschaft in CSS verwenden und die Dauer und den Typ des Übergangs festlegen.
• Verwenden von CSS animations: Sie können komplexere Animationen mit CSS animations erstellen. Auf diese Weise können Sie Keyframes festlegen und Animationen mit CSS steuern.
• JavaScript verwenden: Interaktivität kann mit JavaScript hinzugefügt werden. Sie können beispielsweise Animationen hinzufügen, wenn Sie den Mauszeiger über Menüpunkte bewegen oder darauf klicken.
• Verwenden von Pseudoelementen: Sie können die Pseudo-Elemente :before und :after verwenden, um zusätzliche Effekte wie Pfeile oder Symbole zu erstellen.

Mit diesen Methoden können Sie dem Seitenmenü Dynamik und Interaktivität hinzufügen, wodurch es attraktiver und benutzerfreundlicher wird.

Testen und Optimieren

Verschiedene Tools und Ansätze können zum Testen verwendet werden. Stellen Sie zunächst sicher, dass das Menü auf verschiedenen Geräten und Browsern korrekt angezeigt wird. Dadurch wird sichergestellt, dass das Menü anpassungsfähig ist und auf allen Bildschirmen gut aussieht.

Zweitens lohnt es sich, die Funktionsfähigkeit des Menüs in verschiedenen Verwendungsszenarien zu überprüfen. Überprüfen Sie beispielsweise, ob das Menü korrekt geöffnet und geschlossen wird, wenn Sie auf ein Symbol oder eine Schaltfläche klicken. Sie können auch überprüfen, wie das Menü auf verschiedene Ereignisse reagiert, z. B. das Bewegen des Cursors oder das Drücken einer Taste.

Nach erfolgreichem Test sollten Sie mit der Optimierung fortfahren. Eine Möglichkeit zur Optimierung kann darin bestehen, den Code zu reduzieren und effizientere Programmiertechniken zu verwenden. Sie können beispielsweise mehrere CSS-Klassen kombinieren oder bessere Algorithmen verwenden, um mit Menüs zu arbeiten.

Es ist auch wichtig, das Laden von Menüs zu optimieren. Sie können beispielsweise CSS- und JavaScript-Dateikomprimierung verwenden oder Caching verwenden, um das Laden zu beschleunigen. Das Optimieren von Bildern oder die Verwendung von CSS-Sprites kann auch die Ladezeit erheblich verkürzen und die Leistung verbessern.

Insgesamt spielen Tests und Optimierungen eine wichtige Rolle beim Erstellen und Verwalten von Seitenmenüs in HTML und CSS. Dies hilft, Funktionalität, Benutzerfreundlichkeit und eine bessere Leistung zu gewährleisten, was Schlüsselkomponenten einer erfolgreichen Webanwendung sind.