Vertikale Sekundärnavigation implementiert mit CSS3
In diesem Artikel wird hauptsächlich ein Beispiel-Tutorial der in reinem CSS3 implementierten vertikalen Sekundärnavigation vorgestellt. Die Besonderheit dieses Navigationsmenüs besteht darin, dass es unbegrenzte Ebenen haben kann. Unten finden Sie den Code. Freunde, die nicht wissen, wie es geht, können vorbeikommen und daraus lernen.
Ich habe bereits viele Navigationsmenüs mit Ihnen geteilt. Heute präsentiere ich Ihnen eine vertikale Sekundärnavigation, die ausschließlich in CSS3 implementiert ist. Dieses Navigationsmenü kann unendlich sein. Werfen wir einen Blick auf die Renderings:
Implementierter Code.
HTML-Code:
<p style="width: 700px; margin: auto;"> <p class="W1-h16"> <ul> <li class="has-sub"><a href="#">Menu 1</a> <ul> <li class="has-sub"><a href="#">Submenu 1.1</a> <ul> <li><a href="#">Submenu 1.1.1</a></li> <li class="has-sub"><a href="#">Submenu 1.1.2</a> <ul> <li><a href="#">Submenu 1.1.2.1</a></li> <li><a href="#">Submenu 1.1.2.2</a></li> </ul> </li> </ul> </li> <li><a href="#">Submenu 1.2</a></li> </ul> </li> <li class="has-sub"><a href="#">Menu 2</a> <ul> <li><a href="#">Submenu 2.1</a></li> <li><a href="#">Submenu 2.2</a></li> </ul> </li> <li class="has-sub"><a href="#">Menu 3</a> <ul> <li><a href="#">Submenu 3.1</a></li> <li><a href="#">Submenu 3.2</a></li> </ul> </li> </ul> </p> </p>
CSS3-Code:
.W1-h16 { padding: 0; margin: 0; border: 0; line-height: 1; } .W1-h16 ul, .W1-h16 ul li, .W1-h16 ul ul { list-style: none; margin: 0; padding: 0; } .W1-h16 ul { position: relative; z-index: 500; float: left; } .W1-h16 ul li { float: left; min-height: 0.05em; line-height: 1em; vertical-align: middle; position: relative; } .W1-h16 ul li.hover, .W1-h16 ul li:hover { position: relative; z-index: 510; cursor: default; } .W1-h16 ul ul { visibility: hidden; position: absolute; top: 100%; left: 0px; z-index: 520; width: 100%; } .W1-h16 ul ul li { float: none; } .W1-h16 ul ul ul { top: 0; rightright: 0; } .W1-h16 ul li:hover > ul { visibility: visible; } .W1-h16 ul ul { top: 0; left: 99%; } .W1-h16 ul li { float: none; } .W1-h16 ul ul { margin-top: 0.05em; } .W1-h16 { width: 13em; background: #333333; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; zoom: 1; } .W1-h16:before { content: ''; display: block; } .W1-h16:after { content: ''; display: table; clear: both; } .W1-h16 a { display: block; padding: 1em 1.3em; color: #ffffff; text-decoration: none; text-transform: uppercase; } .W1-h16 > ul { width: 13em; } .W1-h16 ul ul { width: 13em; } .W1-h16 > ul > li > a { border-right: 0.3em solid #1b9bff; color: #ffffff; } .W1-h16 > ul > li > a:hover { color: #ffffff; } .W1-h16 > ul > li a:hover, .W1-h16 > ul > li:hover a { background: #1b9bff; } .W1-h16 li { position: relative; } .W1-h16 ul li.has-sub > a:after { content: '»'; position: absolute; rightright: 1em; } .W1-h16 ul ul li.first { -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .W1-h16 ul ul li.last { -webkit-border-radius: 0 0 3px 0; -moz-border-radius: 0 0 3px 0; border-radius: 0 0 3px 0; border-bottom: 0; } .W1-h16 ul ul { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .W1-h16 ul ul { border: 1px solid #0082e7; } .W1-h16 ul ul a { color: #ffffff; } .W1-h16 ul ul a:hover { color: #ffffff; } .W1-h16 ul ul li { border-bottom: 1px solid #0082e7; } .W1-h16 ul ul li:hover > a { background: #4eb1ff; color: #ffffff; } .W1-h16.align-rightright > ul > li > a { border-left: 0.3em solid #1b9bff; border-right: none; } .W1-h16.align-rightright { float: rightright; } .W1-h16.align-rightright li { text-align: rightright; } .W1-h16.align-rightright ul li.has-sub > a:before { content: '+'; position: absolute; top: 50%; left: 15px; margin-top: -6px; } .W1-h16.align-rightright ul li.has-sub > a:after { content: none; } .W1-h16.align-rightright ul ul { visibility: hidden; position: absolute; top: 0; left: -100%; z-index: 598; width: 100%; } .W1-h16.align-rightright ul ul li.first { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; } .W1-h16.align-rightright ul ul li.last { -webkit-border-radius: 0 0 0 3px; -moz-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; } .W1-h16.align-rightright ul ul { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
So verwenden Sie CSS3, um einen kreisförmigen Fortschrittsbalken zu implementieren
Verwenden Sie CSS3 zum Abgleichen die horizontale Verwendung des vertikalen Bildschirms
So verwenden Sie CSS3, um einen 3D-Flipbook-Effekt zu erzielen
Das obige ist der detaillierte Inhalt vonVertikale Sekundärnavigation implementiert mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Da Websites und Anwendungen funktional immer komplexer werden, wird die Berechtigungsverwaltung immer wichtiger. Wenn sich ein Benutzer über die Authentifizierung anmeldet, möchten wir, dass er auf Seiten und Funktionen zugreifen kann, für die er eine Berechtigung hat, nicht jedoch auf Seiten und Funktionen, für die er keine Berechtigung hat. In diesem Artikel wird erklärt, wie man ein berechtigungsbasiertes Navigationsmenü in Laravel implementiert, damit wir einfach steuern können, was Benutzer sehen können. Schritt 1: Laravel installieren und Datenbank konfigurieren Wenn Sie bereits mit Laravel vertraut sind, können Sie diesen Schritt überspringen. Andernfalls befolgen Sie bitte die

Wie kann ich mit JavaScript den Hervorhebungseffekt erzielen, indem ich das Navigationsmenü an eine bestimmte Position scrolle? Das Navigationsmenü ist eine der häufigsten Komponenten im Webdesign. Um das Benutzererlebnis zu verbessern, können wir JavaScript verwenden, um den Hervorhebungseffekt zu erzielen, wenn das Navigationsmenü zu einer bestimmten Position scrollt. Auf diese Weise wird das Navigationsmenü beim Scrollen des Benutzers durch die Seite in Echtzeit aktualisiert und zeigt den aktuellen Standort an. Der Schlüssel zum Erreichen dieses Effekts besteht darin, das Seiten-Scroll-Ereignis zu überwachen und die Beziehung zwischen der aktuellen Scroll-Position und der angegebenen Position zu bestimmen. Unten werden wir es tun

Mit der Entwicklung des Internets werden Websites immer komplexer, ihre Funktionen werden immer umfangreicher und die Bedürfnisse der Benutzer werden immer vielfältiger. Um Benutzern das schnelle Auffinden der erforderlichen Funktionen zu erleichtern, wird das Navigationsmenü immer vielfältiger ist zu einem unverzichtbaren Element geworden. Wie verwende ich das Navigationsmenü in ThinkPHP6? Dieser Artikel führt Sie Schritt für Schritt ein. 1. Erstellen Sie eine Navigationsmenü-Datentabelle. In ThinkPHP6 können wir eine Datenbank zum Speichern von Navigationsmenü-Informationen verwenden. Zuerst müssen wir eine Navigationsmenü-Datentabelle erstellen. Die spezifische Tabellenstruktur ist wie folgt: CREAT

HTML, CSS und jQuery: Erstellen Sie ein schönes Navigationsmenü. Das Navigationsmenü spielt eine sehr wichtige Rolle im Webdesign. Es bietet nicht nur Navigationsfunktionen für Besucher, sondern erhöht auch das Benutzererlebnis der Website. In diesem Artikel wird anhand spezifischer Codebeispiele erläutert, wie Sie mithilfe von HTML, CSS und jQuery ein schönes Navigationsmenü erstellen. 1. HTML-Struktur Zunächst müssen wir HTML verwenden, um die Struktur des Navigationsmenüs zu erstellen. Hier ist eine einfache HTML-Navigationsmenüvorlage: <n

So implementieren Sie ein Navigationsmenü mit reibungslosem Bildlauf auf einer Webseite durch reines CSS. Die Anleitung von Benutzern zum Navigieren auf einer Webseite ist ein wichtiges Designelement, und ein Navigationsmenü mit reibungslosem Bildlauf ist eine Möglichkeit, ein benutzerfreundliches Navigationserlebnis zu bieten. In diesem Artikel wird erläutert, wie ein solches Navigationsmenü durch reines CSS implementiert wird, und es werden entsprechende Codebeispiele bereitgestellt. 1. HTML-Struktur Zunächst müssen wir die Grundstruktur des Navigationsmenüs in HTML erstellen. Hier ist ein einfaches Beispiel: <navclass="smooth-scr

HTML, CSS und jQuery: Erstellen Sie einen Dropdown-Animationseffekt für das Navigationsmenü. In der Webentwicklung kann ein attraktiver Seiteneffekt die Attraktivität der Website durch die Benutzer erhöhen und das Benutzererlebnis verbessern. Unter anderem ist die Menünavigation eines der häufigsten Elemente auf Websites. Wir können Animationseffekte hinzufügen, um die interaktive Wirkung von Menüs zu erhöhen und die Website lebendiger zu gestalten. In diesem Artikel verwenden wir HTML, CSS und jQuery, um ein Navigationsmenü mit Dropdown-Animationseffekten zu erstellen. In den folgenden Schritten erfahren Sie, wie Sie dies nutzen

Reines CSS ist eine schnelle Möglichkeit, responsive Navigationsmenüs zu erstellen, ohne JavaScript zu verwenden. In diesem Artikel stellen wir Ihnen detaillierte Schritte zur Implementierung eines responsiven Navigationsmenüs mit konkreten Codebeispielen vor. Schritt 1: HTML-Struktur Zuerst müssen wir die HTML-Struktur des Navigationsmenüs einrichten. Hier ist ein einfaches Beispiel:<navclass="navbar"><ulclass="menu&q

HTML, CSS und jQuery: Erstellen Sie ein Navigationsmenü der ersten Ebene mit animierten Effekten. Bei Webdesign und -entwicklung ist das Navigationsmenü eine sehr wichtige Komponente. Ein gutes Navigationsmenü kann für eine klare Navigationsstruktur und ein gutes Benutzererlebnis sorgen. In diesem Artikel erstellen wir mithilfe von HTML, CSS und jQuery ein animiertes Navigationsmenü der ersten Ebene. 1. HTML-Struktur Zunächst müssen wir die HTML-Struktur des Navigationsmenüs festlegen. Hier ist ein einfaches Beispiel: <na
