Heim Web-Frontend CSS-Tutorial Vertikale Sekundärnavigation implementiert mit CSS3

Vertikale Sekundärnavigation implementiert mit CSS3

Jun 26, 2018 am 10:09 AM
导航菜单

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>
Nach dem Login kopieren

 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: &#39;Oxygen Mono&#39;, Tahoma, Arial, sans-serif;   
  zoom: 1;   
}   
.W1-h16:before {   
  content: &#39;&#39;;   
  display: block;   
}   
.W1-h16:after {   
  content: &#39;&#39;;   
  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: &#39;»&#39;;   
  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: &#39;+&#39;;   
  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;   
}
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein berechtigungsbasiertes Navigationsmenü in Laravel So implementieren Sie ein berechtigungsbasiertes Navigationsmenü in Laravel Nov 02, 2023 pm 06:52 PM

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? Wie kann ich mit JavaScript den Hervorhebungseffekt erzielen, indem ich das Navigationsmenü an eine bestimmte Position scrolle? Oct 19, 2023 am 09:46 AM

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

So verwenden Sie das Navigationsmenü in ThinkPHP6 So verwenden Sie das Navigationsmenü in ThinkPHP6 Jun 21, 2023 am 08:03 AM

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ü HTML, CSS und jQuery: Erstellen Sie ein schönes Navigationsmenü Oct 24, 2023 am 08:23 AM

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: &lt;n

So implementieren Sie ein reibungslos scrollendes Navigationsmenü auf einer Webseite durch reines CSS So implementieren Sie ein reibungslos scrollendes Navigationsmenü auf einer Webseite durch reines CSS Oct 20, 2023 pm 04:22 PM

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: &lt;navclass="smooth-scr

HTML, CSS und jQuery: Erstellen Sie einen Dropdown-Animationseffekt für das Navigationsmenü HTML, CSS und jQuery: Erstellen Sie einen Dropdown-Animationseffekt für das Navigationsmenü Oct 27, 2023 pm 03:22 PM

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

Implementierungsschritte zur Implementierung eines responsiven Navigationsmenüs mit reinem CSS Implementierungsschritte zur Implementierung eines responsiven Navigationsmenüs mit reinem CSS Oct 21, 2023 am 08:30 AM

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:&lt;navclass="navbar"&gt;&lt;ulclass="menu&q

HTML, CSS und jQuery: Erstellen Sie ein animiertes Navigationsmenü der ersten Ebene HTML, CSS und jQuery: Erstellen Sie ein animiertes Navigationsmenü der ersten Ebene Oct 27, 2023 pm 12:31 PM

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: &lt;na

See all articles