js+css zur Realisierung eines dreistufigen Navigationsmenüs

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:
  • js linkes dreistufiges Menünavigationsbeispielcode
  • Drei Möglichkeiten zur Implementierung des sekundären Dropdown-Menüs im Navigationsmenü in JS
  • JS realisiert den Effekt der Hervorhebung der Navigationsleiste nach Auswahl des aktuellen Menüs
  • Ein js-gesteuerter Beispielcode für ein Navigationsmenü
  • js, um eine horizontal scrollende Menünavigation zu erreichen
  • Navigationsmenü mit Akkordeoneffekt, erstellt mit nativem JS
  • JS-Navigationsmenü vergleichbar mit Flash
  • Natives JS, um den Effekt eines Navigations-Dropdown-Menüs zu erzielen
  • js-Methode zur Realisierung eines Navigationsmenüs mit mehreren Optionen
  • Ein relativ klassisches und praktisches Trigger-Navigationsmenü, implementiert mit js

<<:  Beispielcode zur Implementierung fortlaufender Updates von Diensten mit Docker Swarm

>>:  Einführungstutorial zum MySQL-Multitabellen-Join

Artikel empfehlen

So lösen Sie das Problem verstümmelter chinesischer Zeichen beim Einfügen von Tabellendaten in MySQL

1. Problem Während der Entwicklung wird beim Einf...

Verwenden Sie CSS, um einen kreisförmigen Welleneffekt zu erzielen

Auf Mobilgeräten sehe ich häufig kreisförmige Wel...

Installations- und Bereitstellungstutorial der neuesten MySQL-Version 5.7.17 (64-Bit-ZIP-Green-Version) unter Win 8 oder höher

Zunächst einmal spielt der Blogger die Community-...

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

Wenn Sie den Inhalt der Datei „source.list“ verse...

Nginx führt Anforderungsverbindungen zusammen und beschleunigt den Website-Zugriff – Beispiele

Vorwort Als einer der besten Webserver der Welt l...

Lösung für die durch das FOUC-Problem auf Webseiten verursachte Verwirrung auf Webseiten

FOUC steht für Flash of Unstyled Content, abgekürz...

Docker-Lernen: Die spezifische Verwendung von Container-Containern

Container sind ein weiteres Kernkonzept von Docke...

SQL-Implementierung von LeetCode (182. Doppelte Postfächer)

[LeetCode] 182.Doppelte E-Mails Schreiben Sie ein...

Unterschiede und Vergleiche von Speicher-Engines in MySQL

MyISAM-Speicher-Engine MyISAM basiert auf der ISA...

So ändern Sie das Kennwort von MySQL 5.1 und melden sich remote bei der MySQL-Datenbank an

Erstellen Sie einen MySQL-Benutzer und autorisier...

CentOS 7-Konfiguration Tomcat9+MySQL-Lösung

Tomcat konfigurieren Installieren Sie zuerst Tomc...

Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.

Vorwort: Ich habe Warnungen zu wahnsinnig langsam...

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Die aktuellste Version von CentOS ist CentOS 8. A...

So verwenden Sie die Vue-Timeline-Komponente

In diesem Artikelbeispiel wird der spezifische Im...

Lösung für das Problem, dass die vertikale Zentrierung des Flex-Innenknopfs nicht zentriert ist

Problembeschreibung Der Schaltflächenstil ist Sym...