Elemente und der zugehörige Link werden im Tag angegeben. Html
Vertikale Navigation Infolgedessen sieht die Struktur des Navigationsmenüs wie folgt aus:
Das CSS kann verwendet werden, um einfache HTML -Menüs in visuell ansprechende Navigationsstangen umzuwandeln. Wenden wir also CSS -Eigenschaften auf die hinzugefügten HTML -Elemente an.
Stil alle Elemente
* Alle Elemente der HTML -Datei werden mit den Margen- und Padding -Eigenschaften mit dem als 0px festgelegten Wert bereitgestellt.
Style vertikal-nav Div
.vertikale Nave Der ".vertikale Navigation ”Wird verwendet, um auf die vertikale Div-Klasse zuzugreifen. Im Folgenden sind die darauf angewandten Eigenschaften:
“Hintergrundfarbe Gibt die Farbe des Hintergrunds des Elements an. “Breite Die Eigenschaft passt die Breite des Elements an. “Höhe Die Eigenschaft passt die Höhe des Elements an. “Padding-Links Die Eigenschaft legt Platz links vom Inhalt des Elements. “Polsterung Die Eigenschaft legt Platz oben im Inhalt des Elements. “Schriftfamilie Eigenschaft wendet Schriftstil auf den Text des Elements an. Die Liste wird bereitgestellt, um sicherzustellen, dass der Browser den ersten Stil nicht unterstützt, der andere wird auf die Schriftart angewendet. Stil H1-Element des vertikalen Navigs div
.vertikal-nav H1 Die folgenden Eigenschaften werden auf das H1 -Element der Überschrift angewendet:
“Randboden Die Eigenschaft legt den Platz am unteren Rand der Überschrift fest. “Farbe Die Eigenschaft legt die angegebene Schriftfarbe fest. Bisher werden die angewandten Eigenschaften das Navigationsmenü wie im folgenden Bild angezeigt:
Lassen Sie uns nun die Kugeln aus der Liste entfernen.
Stil „ul“ Element des vertikalen Navigs div
.vertikale Nave ul Der "Listenstil ”Eigenschaft mit dem Wert als"keiner Entfernen Sie die Kugeln aus der Liste.
Stil „A“ Element des Li -Elements
.vertikal-navi ul li a Der ".vertikal-navi li a ”Definiert den Weg des Tags. Die folgenden Eigenschaften werden darauf angewendet:
“Textdekoration "Mit dem Wert"keiner ”Entfernt die unterstreichende Dekoration aus der Liste. “Anzeige ”Eigenschaft mit dem Wert als"Block Setzt jedes Listenelement in einer Zeile. “Breite Eigenschaft wird für die Einstellung der Breite des Elements verwendet. “Hintergrund Die Eigenschaft wird verwendet, um dem Hintergrund des Elements Effekte zu verleihen. “Farbe Eigenschaft gibt die Schriftfarbe an. “Box Schatten ”Eigenschaft gibt die X- und Y -Offsets an, verschwimmen und verteilen Sie den Radius und die Farbe des Schattens. “Grenzradius ”Eigenschaft macht die Kanten des Elements rund. “Rand Die Eigenschaft legt den Raum um das Element um. “Polsterung Eigenschaft gibt Platz um den Inhalt des Elements an. Infolgedessen wird die Navigationsleiste wie folgt aussehen:
Wenden wir einige Übergangseffekte auf die oben erstellten Navigationsmenüs an.
Bonus -Tipp: Übergang zum vertikalen Navigationsmenü anwenden
Jetzt werden wir den Übergang zum “anwendenA " Element:
Übergang: alle 0.3s Leichtigkeit; Hier ist die Beschreibung des oben gegebenen Codeblocks:
Übergangs-Property wird als “spezifiziertalle Das bedeutet, dass der Übergang auf alle Eigenschaften angewendet wird. Die Übergangsdauer wird als "angegeben"0.3s ”. Übergangs-Timing-Funktion wird als “angegeben“Leichtigkeit ”, Was zu einer Zunahme der Geschwindigkeit in der Mitte des Übergangs führt und am Ende wieder verlangsamt. Stil „A“ Element auf dem Schwebe
.vertikal-navi ul li a: schwebe Die obigen Eigenschaften, die auf das "A" -Element der vertikalen Navigation angewendet werden, werden nachstehend beschrieben:
“Hintergrundfarbe Eigenschaft gibt die Farbe des Hintergrunds des Elements an. “Farbe Eigenschaft gibt die Farbe der Schriftart des Elements an. “verwandeln Eigenschaft wird mit dem Wert als Skala angewendet (1.1, 1.5). Diese Skala () -Funktion definiert eine 2D -Ebene -Transformation. Speichern Sie den oben genannten Code und öffnen Sie ihn im Browser. Die Navigationsmenüleiste sieht folgendermaßen aus:
Wir haben erfolgreich gelernt, ein vertikales Navigationsmenü mit CSS zu erstellen.
Abschluss
Die Navigationsleiste spielt eine wichtige Rolle bei der Benutzerfreundlichkeit von Website. Es besteht aus einer Liste von Links zu verschiedenen Abschnitten der Anwendung. In HTML die
Und Elemente werden verwendet, um die Liste der Links zu erstellen, insbesondere in der Navigationsleiste. Um sie interaktiv zu machen, werden unterschiedliche Stylingeigenschaften mit CSS auf sie angewendet. Diese Studie hat das Verfahren zur Erstellung und Animation eines vertikalen Navigationsmenüs mit CSS erklärt und animiert.
