Mit der rasanten Entwicklung der Web-Frontend-Technologie wurde JavaScript in verschiedenen Webanwendungen weit verbreitet. Im Webdesign ist die Navigationsleiste eines der wichtigsten Elemente. Sie ist der Haupteingang für den Benutzer und ein wichtiger Teil der Gesamtstruktur der Website. In diesem Artikel wird erläutert, wie Sie die linke sekundäre Navigationsleiste von JavaScript implementieren.
Die Navigationsleiste ist eine der grundlegendsten Komponenten der Website und wird hauptsächlich zum Navigieren auf verschiedenen Seiten der gesamten Website verwendet. Allerdings scheint die Navigationsleiste auf der Seite oft zu lang zu sein. In diesem Fall verwenden wir normalerweise eine sekundäre Navigationsleiste, um dieses Problem zu lösen. In diesem Artikel wird die Verwendung von JavaScript zum Implementieren einer linken sekundären Navigationsleiste vorgestellt und das Implementierungsprinzip kurz erläutert.
Bevor Sie die linke sekundäre Navigationsleiste implementieren, müssen Sie zunächst einige notwendige Konzepte und Technologien beherrschen. Dazu gehören HTML, CSS und JavaScript.
HTML ist eine Auszeichnungssprache zur Beschreibung von Webinhalten. HTML-Tags werden zum Definieren und Beschreiben verschiedener Elemente auf der Seite verwendet, einschließlich Text, Bildern, Links usw. Bei der Implementierung der linken sekundären Navigationsleiste müssen Sie HTML verwenden, um die Struktur der Navigationsleiste zu definieren.
CSS ist eine Auszeichnungssprache zur Beschreibung des Stils von Webseiten. CSS-Stylesheets werden verwendet, um das Erscheinungsbild und Layout verschiedener Elemente auf der Seite zu definieren und zu beschreiben. Bei der Implementierung der linken sekundären Navigationsleiste müssen Sie CSS verwenden, um den Stil und das Layout der Navigationsleiste zu definieren.
JavaScript ist eine Programmiersprache, die zur Entwicklung von Webanwendungen verwendet wird. Ihre Syntax und Semantik ähneln der C-Sprache. Bei der Implementierung der linken sekundären Navigationsleiste muss JavaScript verwendet werden, um die Interaktion und dynamischen Effekte der Navigationsleiste zu realisieren.
Jetzt beginnen wir mit unseren Umsetzungsschritten.
Schritt 1: HTML-Struktur
Zuerst müssen wir HTML verwenden, um die Struktur der Navigationsleiste zu definieren, einschließlich der Hauptnavigationsleiste und der sekundären Navigationsleiste. Die Hauptnavigationsleiste ist der Zugang zur gesamten Website, während die sekundäre Navigationsleiste ein Untermenü der Hauptnavigationsleiste ist, das zur Anzeige einiger Inhalte der Hauptnavigationsleiste dient. Das Folgende ist eine einfache HTML-Struktur, die zum Implementieren der linken sekundären Navigationsleiste verwendet wird:
<div class="sidebar"> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul class="sub-nav"> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul> </li> <li><a href="#">Services</a> <ul class="sub-nav"> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div>
Im obigen Code verwenden wir ein div- und ein ul-Element, um die Navigationsleiste darzustellen. Darunter ist das ul-Element in zwei Teile unterteilt: die Hauptnavigationsleiste und die sekundäre Navigationsleiste. Die Hauptnavigationsleiste wird durch li- und a-Tags dargestellt, während die sekundäre Navigationsleiste durch verschachtelte ul-, li- und a-Tags dargestellt wird.
Schritt 2: CSS-Stile
Als nächstes müssen wir CSS-Stile verwenden, um den Stil und das Layout der Navigationsleiste zu definieren. Das Stylesheet befindet sich im
