Web-Entwicklung ist das wichtigste Werkzeug für die Erstellung moderner Websites. Das Erstellen eines vertikalen Menüs ist eine der Aufgaben, mit denen viele Entwickler konfrontiert sind. Das vertikale Menü ist ein integraler Bestandteil des Website-Designs und bietet dem Benutzer die Möglichkeit, durch verschiedene Abschnitte und Seiten zu navigieren. Um ein vertikales Menü in HTML zu erstellen, müssen Sie die Grundlagen der Markupsprache kennen und die entsprechenden Tags und Attribute verwenden.
Ein vertikales Menü kann sowohl mit einer Liste als auch mit einer Tabelle implementiert werden . Die beste Lösung wäre in den meisten Fällen die Verwendung einer Liste: Dies ist eine bequemere und semantisch korrekte Lösung zum Erstellen eines Menüs. Zuerst müssen Sie die Menüstruktur in HTML definieren. Jeder Menüpunkt wird durch ein einzelnes Element in der Liste dargestellt, das in ein Tag gewickelt ist . Jedes Element kann einen Link, einfachen Text, ein Symbol oder zusätzliche Styling-Elemente enthalten.
Nachdem Sie die Menüstruktur definiert haben, müssen Sie die entsprechenden Stile hinzufügen. Dazu können Sie CSS verwenden oder mithilfe eines Attributs Stile direkt zu HTML hinzufügen style. Mit CSS können Sie die Größe, den Abstand zwischen den Elementen, die Hintergrundfarbe, die Schriftart und andere Einstellungen ändern. Nachdem Sie die Struktur erstellt und die Stile angewendet haben, können Sie nur noch JavaScript oder jQuery hinzufügen, um die Interaktivität des Menüs zu gewährleisten.
Vertikales HTML-Menü: Erstellen und Anpassen
Um ein vertikales Menü zu erstellen, können wir eine Liste verwenden unordered list ( ) in HTML. Listenelemente list items ( ) werden Menüpunkte darstellen. Jeder Artikel kann ein Link zu einer separaten Seite oder einem Abschnitt der Website sein.
Beispielcode zum Erstellen eines einfachen vertikalen Menüs:
In diesem Code entspricht jedem Menüelement ein Listenelement . Innerhalb jedes Elements befindet sich ein Link, der den zu navigierenden Text und die Adresse angibt.
Um den Stil des vertikalen Menüs anzupassen, können wir CSS verwenden. Wir können Klassen oder IDs zu Listenelementen hinzufügen und ihnen Stile mit CSS-Eigenschaften wie Breite, Höhe, Hintergrundfarbe, Einzug usw. zuweisen.
Um beispielsweise eine Hintergrundfarbe und eine Textfarbe für alle Menüelemente festzulegen:
.menu-item
Hier ist die Klasse .menu-item Sie weisen Stile zu, um den Hintergrund und die Farbe des Textes festzulegen. Wir können diese Klasse zu jedem Menüpunkt hinzufügen, indem wir ein Attribut hinzufügen class im Tag .
Jetzt, da Sie wissen, wie Sie ein vertikales Menü in HTML erstellen und anpassen können, können Sie diese Fähigkeiten nutzen, um die Benutzererfahrung auf Ihrer Website zu verbessern.
Auswählen geeigneter Tags und Elemente
Um ein vertikales Menü in HTML zu erstellen, müssen Sie geeignete Tags und Elemente auswählen, die die Struktur des Menüs und das Erscheinungsbild des Menüs organisieren.
-
, in dem sich die Menüpunkte befinden. Jeder Menüeintrag wird in ein Tag umwickelt
. Sie können zusätzliche Tags verwenden, um Untermenüs zu erstellen
- Punkt 1
- Punkt 2
- Punkt 3
- Unterabsatz 3.1
- Unterabsatz 3.2
- Unterabsatz 3.3
Möglicherweise müssen Sie auch Tags verwenden, um Links innerhalb von Menüpunkten zu erstellen. Zum Beispiel:
Mit den passenden Tags und Elementen können Sie ein benutzerfreundliches und stilvolles vertikales Menü in HTML erstellen, das den Anforderungen Ihres Projekts entspricht.
Anwenden von CSS zum Formatieren von Menüs
Sie können Eigenschaften wie Hintergrundfarbe, Schriftart, Einzug und vieles mehr verwenden, um ein vertikales Menü zu stylen. Mit CSS können Sie auch verschiedene Effekte wie Animationen und Übergänge hinzufügen, um ein interaktiveres und attraktiveres Menü zu erstellen.
Eine Möglichkeit, CSS anzuwenden, um ein vertikales Menü zu stylen, besteht darin, Klassen und IDs zu verwenden. Sie können beispielsweise eine Klasse "menu" erstellen und auf ein Element anwenden
enthält die Menüpunkte. Anschließend können Sie mithilfe von CSS Stile für ein Element mit der Klasse "menu" festlegen.Beispiel für CSS-Code zum Formatieren eines vertikalen Menüs:
.menu .menu ul .menu li .menu li a .menu li a:hoverIn diesem Beispiel hat das Element mit der Klasse "menu" die folgenden Stile: Hintergrundfarbe (#f2f2f2), Einzug (10 Pixel) und abgerundete Ecken (5 Pixel). Auch für Listenelemente (
Wenn Sie ein vertikales Menü mit CSS stylen, können Sie ein einzigartiges Erscheinungsbild erstellen und Interaktivität hinzufügen. CSS macht es auch einfach, Menüstile zu ändern, ohne den HTML-Code ändern zu müssen, was ihn flexibler und benutzerfreundlicher macht.
Hinzufügen von Interaktivität zu einem vertikalen Menü
Wenn Sie Ihr vertikales Menü in HTML erstellt haben, können Sie Interaktivität mit JavaScript hinzufügen. Dies ermöglicht es Ihren Besuchern, mit Menüs zu interagieren und die Benutzererfahrung zu verbessern.
Der folgende Code zeigt eine einfache Möglichkeit, Ihrem vertikalen Menü Interaktivität hinzuzufügen:
- Fügen Sie jedem Menüpunkt eine ID hinzu. Zum Beispiel id="menu-item-1" .
- Fügen Sie jedem Menüelement, das die Funktion beim Klicken aufruft, ein onclick-Attribut hinzu. Zum Beispiel onclick="menuClick(1)" .
Ihr JavaScript-Code könnte folgendermaßen aussehen:
function menuClick(item)
In diesem Beispiel wird ein Popup-Fenster mit der Nummer des ausgewählten Elements angezeigt, wenn Sie auf einen Menüeintrag klicken.
Sie können auch andere Funktionen und Effekte hinzufügen, wie zum Beispiel das Ändern der Farbe, das Öffnen oder Schließen von Untermenüs usw. Dadurch können Sie ein dynamischeres und benutzerfreundlicheres vertikales Menü erstellen.
Optimieren des vertikalen Menüs für mobile Geräte
Angesichts der wachsenden Anzahl von Benutzern, die über mobile Geräte auf das Internet zugreifen, ist es wichtig, das vertikale Menü ihrer Website zu optimieren, um die Benutzerfreundlichkeit auf diesen Geräten zu gewährleisten.
Wenn Sie ein vertikales Menü für mobile Geräte erstellen, sind die folgenden Elemente der Schlüssel:
- 1. Visuelle Anziehungskraft und Benutzerfreundlichkeit. Mobile Benutzer bevorzugen ein klares und verständliches Markup. Denken Sie daran, dass die Bildschirmgröße des Geräts möglicherweise begrenzt ist, daher ist es wichtig, das Menü und seine Elemente zugänglich und für die Fingerberührung geeignet zu machen.
- 2. Kompaktheit. Das vertikale Menü auf dem mobilen Gerät sollte nur minimalen Platz auf dem Bildschirm einnehmen. Platzieren Sie die Menüelemente in einer vertikalen Spalte, damit Sie nicht durch den Bildschirm scrollen müssen.
- 3. Flexibilität. Die Menüoberfläche muss an verschiedene Bildschirmauflösungen für mobile Geräte angepasst werden. Die Verwendung von ansprechenden Designs oder Medienanfragen kann dabei helfen.
Sie können die folgenden Methoden verwenden, um das vertikale Menü für mobile Geräte zu optimieren:
- 1. Verwenden Sie den Hamburger-Button, um das Menü auszublenden und zu erweitern. Die Hamburger-Schaltfläche ist ein Symbol von drei horizontalen Balken oder einem anderen Symbol und befindet sich normalerweise oben auf dem Bildschirm. Wenn Sie darauf klicken, wird das vertikale Menü geöffnet.
- 2. Verwenden Sie CSS-Animationen, um das Menü reibungslos zu öffnen und zu schließen. Dies gibt dem Benutzer ein Gefühl von Glätte und Professionalität.
- 3. Fügen Sie die Möglichkeit hinzu, Untermenüs zu scrollen. Wenn Ihr vertikales Menü Unterabschnitte oder Untermenüs enthält, fügen Sie eine Bildlauffunktion hinzu, damit Benutzer alle Menüelemente sehen können.
Es ist auch wichtig, das vertikale Menü auf verschiedenen mobilen Geräten und Betriebssystemen zu testen, um sicherzustellen, dass es unter allen Bedingungen korrekt angezeigt wird und das richtige Verhalten aufweist.
-
und
. Zum Beispiel: