js+css zur Realisierung eines dreistufigen Navigationsmenüs
|
In diesem Artikelbeispiel wird der spezifische Code von js+css zur Implementierung des dreistufigen Navigationsmenüs zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Es ist relativ einfach, das Hover-Ereignis des Navigationsmenüs mit CSS zu implementieren. Sie müssen nur die Transparenz ändern. Wenn Sie möchten, dass das Menü einen Farbverlaufseffekt hat, unterstützt Transition leider keine Anzeige. Verwenden Sie daher Opazität, um denselben Effekt zu erzielen. Hier ist der vollständige, in CSS implementierte Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Navigationsmenü der dritten Ebene</title>
</Kopf>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Schriftgröße: 16px;
Hintergrundfarbe: #EDEDED;
Schriftstil: erben;
Farbe: #757576;
}
.hauptsächlich{
Breite: 1050px;
Rand: 0 automatisch;
}
.fl{
schweben: links;
}
.fr{
schweben: rechts;
}
A{
Textdekoration: keine;
Gliederung: keine;
Farbe: #757576;
}
ul,ol{
Listenstil: keiner;
}
.klar{
klar: beides;
}
.clearfix{
*Zoom:1;
}
li{
schweben: links;
Anzeige: Inline-Block;
Breite: 120px;
Höhe: 40px;
Textausrichtung: zentriert;
Zeilenhöhe: 40px;
}
li a:hover{
Farbe: rot;
}
#Erste {
Deckkraft: 0;
}
#firstli{
Schwimmer: keiner;
Position: relativ;
}
li a:hover{
Farbe: rot;
Übergang: alle 0,5 s;
}
:schweben{
Übergang: alles 2er;
}
#zweite {
Deckkraft: 0;
Rand: -40px 0 0 80px;
Polsterung: 0px;
Position: absolut;
}
#nav_one:hover #first{
Deckkraft: 1;
Übergang: alles 2er;
}
#nav_two:hover #zweite{
Deckkraft: 1;
Übergang: alles 2er;
}
</Stil>
<Text>
<div Klasse="Hauptnavigation">
<ul id="nav">
<li id="nav_one"><a href="#" >Ebene 1</a>
<ul id="Vorname">
<li id="nav_zwei" Klasse="nav_zwei">
<a href="#" >Zweite Ebene</a>
<ul id="zweite">
<li><a href="#" >Ebene 3</a></li>
<li><a href="#" >Ebene 3</a></li>
<li><a href="#" >Ebene 3</a></li>
</ul>
</li>
<li class="nav_two"><a href="#" >Zweite Ebene</a></li>
<li class="nav_two"><a href="#" >Zweite Ebene</a></li>
</ul>
</li>
<li><a href="#" >Ebene 1</a></li>
<li><a href="#" >Ebene 1</a></li>
<li><a href="#" >Ebene 1</a></li>
<li><a href="#" >Ebene 1</a></li>
</ul>
</div>
</body>
</html>Die Implementierung in js ist relativ mühsam, aber es ist auch möglich, den Hover-Effekt in CSS zu ersetzen.
<!--<Skript>
fenster.onload = funktion(){
var eins = document.getElementById("nav_one");
var frist = document.getElementById("frist");
var Sekunde = document.getElementById("Sekunde");
one.onmouseover = Funktion(){
erster.Stil.opacity = "1";
first.style.transition = "alle 2en";
first.style.WebkitTransition = "alle 2en";
}
one.onmouseout = Funktion(){
erster.Stil.opacity = "0";
first.style.transition = "alle 0,5 s";
first.style.WebkitTransition = "alle 0,5 s";
}
var zwei = document.getElementById("nav_two");
zwei.onmouseover = function(){
zweiter.Stil.Opazität = "1";
zweiter.Stil.Übergang = "alle 2en";
second.style.WebkitTransition = "alle 2en";
}
zwei.onmouseout = function(){
zweiter.Stil.Opazität = "0";
zweiter.Stil.Übergang = "alle 0,5 s";
zweiter.style.WebkitTransition = "alle 0,5 s";
}
}
</script>-->Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Beispielcode zur Implementierung fortlaufender Updates von Diensten mit Docker Swarm
>>: Einführungstutorial zum MySQL-Multitabellen-Join
Artikel empfehlen
JavaScript, um die Idee des Schlangenspiels umzusetzen
Die Implementierungsidee des Javascript-Spiels Sn...
mysql-8.0.16 winx64 neuestes Installationstutorial mit Bildern und Text
Ich habe erst vor Kurzem angefangen, mich mit Dat...
Beispiel für die Konfiguration der domänenübergreifenden Fehlerbehebung in nginx
Die domänenübergreifende Nginx-Konfiguration wird...
Spezialeffekte der Studiennotizen von Bootstrap 3.0 (Anzeigen und Ausblenden, Entfernen des Schwebezustands, Schaltfläche „Schließen“ usw.)
Die wesentlichen Inhalte dieses Artikels sind wie...
Lösung für das Problem der großen Schriftgröße auf iPhone-Geräten in WAP-Seiten
Wenn Sie keine Javascript-Steuerung verwenden möch...
Tutorial zur Installation von VMware WorkStation 14 Pro unter Ubuntu 17.04
In diesem Artikel wird die spezifische Methode zu...
Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann
<frameset></frameset> ist jedem bekann...
So überprüfen Sie, wo die Metadatensperre in MySQL blockiert ist
So überprüfen Sie, wo die Metadatensperre in MySQ...
Detaillierte Erklärung der binären und varbinären Datentypen in MySQL
Vorwort BINARY und VARBINARY ähneln in gewisser W...
Tomcats Methode zum Festlegen von Ports über Platzhalter (d. h. Methode zur Parameterspezifikation)
Für meine Arbeit habe ich im Internet viele Infor...
Details und Beispielcode der MySQL-Replikationstabelle
Detaillierte Erklärung der MySQL-Replikationstabe...
Detaillierte Erklärung eines einfachen Schneeeffektbeispiels mit JS
Inhaltsverzeichnis Vorwort Hauptimplementierungsc...
CentOS7 verwendet RPM-Paket zur Installation von MySQL 5.7.18
veranschaulichen Dieser Artikel wurde am 20.05.20...
Zwei einfache Möglichkeiten, Textwasserzeichen von Webseiten zu entfernen
<br /> Wenn wir bestimmte Websites durchsuch...
JS-Implementierung des Karussell-Karussell-Falls
In diesem Artikelbeispiel wird der spezifische JS...