CSS+HTML zur Realisierung der Funktion der oberen Navigationsleiste
|
Implementierungseffektdiagramm für die Navigationsleiste, die feste obere Navigationsleiste und das sekundäre Menü:
Aktualisierung 16.11.2018: Neue Code-Implementierung (optimiertes Layout):
<html>
<Kopf>
<style type="text/css">
.Spitze{
/* Breite, Höhe, Hintergrundfarbe festlegen */
height: auto; /*Ändere die Höhe auf automatische Höhe*/
Breite: 100 %;
Rand links: 0;
Hintergrund: RGB (189, 181, 181);
Position: fest; /*Oben fixiert*/
top: 0;/*Der Abstand von oben beträgt 0*/
Rand unten: 5px;
}
.top ul{
/* Löscht den Standardstil des ul-Tags */
width: auto;/*Die Breite wird ebenfalls auf automatisch geändert*/
Listenstiltyp: keiner;
Leerzeichen:nowrap;
Überlauf: versteckt;
Rand links: 5 %;
/* oberer Rand: 0; */
Polsterung: 0;
}
.top li {
float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
margin-right:2%; /* Der Abstand zwischen zwei Linien*/
Position: relativ;
Überlauf: versteckt;
}
.top li a{
/* Anzeigeformat für Linkinhalte festlegen */
display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
Farbe: weiß;
Textausrichtung: zentriert;
Polsterung: 3px;
Überlauf: versteckt;
Textdekoration: keine; /* Unterstreichung entfernen */
}
.top li a:hover{
/* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
Hintergrundfarbe: #111;
}
.top ul li ul{
/* Sekundäres Menü einrichten */
Rand links: -0,2px;
Hintergrund: RGB (189, 181, 181);
Position: relativ;
Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/
}
.top ul li ul li{
/* Anzeige des Inhalts des sekundären Menüs li*/
Schwimmer: keine;
Textausrichtung: zentriert;
}
.top ul li:hover ul{
/* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
Anzeige: Block;
}
Körper{
Hintergrund: #eff3f5;
}
</Stil>
<Text>
<div Klasse="oben">
<Mitte>
<ul>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#"><b>Menü der ersten Ebene</b></a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li>
<a href="#">Menü der ersten Ebene</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</Kopf>
</html>Unten sehen Sie die ursprüngliche Codeimplementierung (beim Layout der Navigationsseite tritt ein Problem auf, wenn die Seite vergrößert oder verkleinert wird):
<html>
<Kopf>
<style type="text/css">
.Spitze{
/* Breite, Höhe, Hintergrundfarbe festlegen */
Höhe: 50px;
Breite: 100 %;
Hintergrund: RGB (189, 181, 181);
Position: fest; /*Oben fixiert*/
top: 0;/*Der Abstand von oben beträgt 0*/
}
.top ul{
/* Löscht den Standardstil des ul-Tags */
Breite: 80%;
Listenstiltyp: keiner;
Rand: 0;
Polsterung: 0;
Überlauf: versteckt;
}
.top li {
float:left; /* Lassen Sie den li-Inhalt horizontal schweben, d. h. ordnen Sie ihn horizontal an*/
margin-right:50px; /* Abstand zwischen zwei Zeilen*/
}
.top li a{
/* Anzeigeformat für Linkinhalte festlegen */
display: block; /*Durch die Darstellung des Links als Blockelement wird der gesamte Linkbereich anklickbar*/
Farbe: weiß;
Textausrichtung: zentriert;
Polsterung: 14px 16px;
Textdekoration: keine; /* Unterstreichung entfernen */
}
.top li a:hover{
/* Der Hintergrund wird schwarz, wenn die Maus ausgewählt wird*/
Hintergrundfarbe: #111;
}
.top ul li ul{
/* Sekundäres Menü einrichten */
Breite: automatisch;
Hintergrund: RGB (189, 181, 181);
Position: absolut;
Anzeige: keine; /* Den Inhalt des sekundären Menüs standardmäßig ausblenden*/
}
.top ul li ul li{
/* Anzeige des Inhalts des sekundären Menüs li*/
Rand rechts: 0;
Schwimmer: keine;
Textausrichtung: zentriert;
}
.top ul li:hover ul{
/* Wenn die Maus den Inhalt des sekundären Menüs auswählt*/
Anzeige: Block;
}
</Stil>
<Text>
<div Klasse="oben">
<Mitte>
<ul>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li><a href="#">Episodenmenü</a></li>
<li><a href="#"><b>Menü der ersten Ebene</b></a></li>
<li><a href="#">Menü der ersten Ebene</a></li>
<li>
<a href="#">Menü der ersten Ebene</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</Kopf>
</html>Dies ist das Ende dieses Artikels über die Verwendung von CSS+HTML zur Implementierung der Funktion der oberen Navigationsleiste. Weitere relevante CSS-Inhalte zur oberen Navigationsleiste finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Analyse der Verwendung der Funktion zur sofortigen Ausführung in JavaScript
Artikel empfehlen
Docker stellt über einen Port eine Verbindung zu einem Container her
Docker-Container-Verbindung 1. Netzwerk-Port-Mapp...
Eine kurze Analyse der asynchronen DOM-Aktualisierung von Vue
Inhaltsverzeichnis Das Prinzip der asynchronen DO...
VMware Workstation 14 Pro installiert CentOS 7.0
Die spezifische Methode zur Installation von Cent...
Implementierung von Nginx-Filterzugriffsprotokollen für statische Ressourcendateien
Unordentliches Protokoll Nginx wird im täglichen ...
JS, CSS und HTML zur Implementierung der Registrierungsseite
Eine mit HTML und CSS implementierte Registrierun...
Detaillierte Erklärung zur JavaScript-Datenabflachung
Inhaltsverzeichnis Was ist Abflachung? Rekursion ...
Deaktivieren Sie die automatische Vervollständigung in HTML, damit der Verlauf nicht angezeigt wird
Das Eingabefeld zeigt beim Eingeben von Inhalten i...
Spezifische Verwendung des Ausnahmefilters Exceptionfilter in nestjs
Wenn wir über den Ausnahmefilter von Nestjs sprec...
So lassen sich Python-Skripte direkt unter Ubuntu ausführen
Nehmen wir als Beispiel das Übersetzungsprogramm....
Optimierung des MySQL Thread_Stack-Verbindungsthreads
MySQL kann nicht nur über das Netzwerk, sondern a...
Die am häufigsten verwendete HTML-Escape-Sequenz
In HTML haben <, >, & usw. eine speziell...
Farbverlaufseffekt im HTML-Hintergrund durch CSS-Stil erreicht
Screenshots der Effekte: Implementierungscode: Cod...
Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)
Wenn Sie aufgefordert werden, einen Schlüssel ein...
Erfahren Sie mehr über JavaScript-Iteratoren
Inhaltsverzeichnis Einführung Wie sieht ein Itera...
MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse
In diesem Artikel werden anhand von Beispielen di...