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
Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows
In diesem Artikel finden Sie das Installations-Tu...
Allgemeine Tags in XHTML
Was sind XHTML-Tags? XHTML-Tag-Elemente sind die ...
Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen
Vorwort Dieser Artikel verwendet die neuen Funkti...
Eine kurze Diskussion über die binäre Familie von JS
Inhaltsverzeichnis Überblick Klecks Blob in Aktio...
Detailliertes Tutorial zur Installation von MySQL 8.0.20 auf CentOS7.8
1. MySQL-Software installieren Laden Sie das offi...
Detaillierte Erklärung der langsamen Remote-Verbindung von Navicat zu MySQL
Die endgültige Lösung ist im letzten Bild Wenn Si...
Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript
Inhaltsverzeichnis 1. Wirkungsdemonstration 2. Im...
Detaillierte Erläuterung der Komponentenentwicklung des Vue-Dropdown-Menüs
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für den Fehler bei der Installation von Docker auf der CentOS-Version
1. Versionsinformationen # Katze /etc/system-rele...
Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems
So installieren Sie das Linux CentOS 7.7-System i...
Eine detaillierte Darstellung des Prozesses zum Erklimmen einer Grube des Docker-Bereitstellungsdienstes
Zum ersten Mal schreiben. Gestatten Sie mir, mich...
VMware Workstation 12 installiert Ubuntu 14.04 (64 Bit)
1. Installationsumgebung Computermodell: Lenovo Y...
So erstellen Sie ein CentOS-Basisimage
Vorwort Derzeit ist das von meiner Firma verwende...
Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen
Das Internet ist bereits voll von Artikeln dieser...
Python stellt eine Verbindung zur Datenbank her MySQL dekomprimierte Version Installationskonfiguration und aufgetretene Probleme
Einführung Heute habe ich gelernt, wie man mit Py...