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

Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker

1. Übersicht Redis Cluster ermöglicht hohe Verfüg...

Lösen Sie das Problem beim Zurücksetzen des Kennworts für das Mysql-Root-Benutzerkonto

Problembeschreibung: Beim Ausführen eines Befehls...

Verwenden Sie Meta, um den Traffic-Cache zu löschen und die Seite bei jedem Besuch zu aktualisieren, um das Debuggen zu vereinfachen

Code kopieren Der Code lautet wie folgt: <!-- ...

Implementierung von Kennwortfeld-Verifizierungsinformationen basierend auf JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung

Vorwort Wenn wir Anwendungen als Docker-Container...

Linux verwendet Rsync + Inotify, um eine Echtzeitsynchronisierung lokaler und Remotedaten zu erreichen

0x0 Testumgebung Der Produktionsserver der Zentra...

Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung

1. Problemsymptome Version: MySQL 5.6, unter Verw...

Lösung für das Problem, dass die Konfigurationsdatei my.cnf in MySQL aufgrund von Berechtigungsproblemen nicht gestartet werden kann

Dieser Artikel stellt hauptsächlich den relevante...

Die Verwendung von FrameLayout in sechs Layouts

Vorwort In der letzten Ausgabe haben wir Ihnen Li...

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

Inhaltsverzeichnis 1. Konzept 2. Umgebungsbeschre...

Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation

Vorwort Die Verzögerung der MySQL Master-Slave-Re...

CSS Paint API: Ein CSS-ähnliches Zeichenbrett

1. Canvas-Bilder als CSS-Hintergrundbilder verwen...

CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken

Manchmal ist es schön, ein paar nette Scrollbar-E...

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

Inhaltsverzeichnis In JavaScript können wir norma...

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

Inhaltsverzeichnis 1. Installation 2.API 3. reagi...