jQuery realisiert den Gleiteffekt des Dropdown-Menüs

Wenn wir eine Webseite erstellen, möchten wir manchmal ein cooles und ansprechendes Dropdown-Menü haben. Obwohl wir zur Erstellung die einfachsten CSS- und JS-Elemente verwenden können, benötigen wir mit jQuery nur sehr kurze Codes, um den folgenden Effekt zu erzielen.

Ist es nicht sehr glatt? Wenn die Maus zum Ziel bewegt wird, wird automatisch ein Dropdown-Menü angezeigt. Es sind nur zwei Codezeilen erforderlich:

$(" ").hover(Funktion() {
$(diese).children(" ").slideToggle();
});

Unter ihnen ist Hover eine zusammengesetzte Formulierung aus dem Vorbeigehen und Verlassen der Maus, die normalerweise so geschrieben wird

$(" ").hover(Funktion() {
     $(this).children(" ").slideDown() );
 }, Funktion() {
     $(this).children(" ").slideUp() );
 });

Das heißt, schreiben Sie zwei Funktionen in Hover, eine für den Fall, dass die Maus darüberfährt, und die andere für den Fall, dass die Maus das Objekt verlässt, und trennen Sie die beiden durch ein Komma. Sie können jedoch sehen, dass ich im obigen Code nur eine Funktion geschrieben habe. Das liegt daran, dass, wenn wir nur eine Funktion in Hover schreiben, der Effekt wiederholt wird, wenn die Maus darüberfährt oder das Objekt verlässt, was einfacher zu schreiben ist.

Verwenden Sie es im Gesamtcode wie folgt:

<!DOCTYPE html>
<Kopf>
    <meta charset="UTF-8">
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        
        li {
            Listenstiltyp: keiner;
        }
        
        A {
            Textdekoration: keine;
            Schriftgröße: 20px;
        }
        
        .nav {
            Rand: 100px;
        }
        
        .nav>li {
            Position: relativ;
            schweben: links;
            Breite: 80px;
            Höhe: 50px;
            Textausrichtung: zentriert;
        }
        
        .nav li ein {
            Anzeige: Block;
            Breite: 100 %;
            Höhe: 100%;
            Zeilenhöhe: 50px;
            Farbe: Schwarz;
   Rand: 1px, durchgehend himmelblau;
        }
        
        .nav>li>a:hover {
            Hintergrundfarbe: rosa;
        }
        
        .nav ul {
            Anzeige: keine;
            Position: absolut;
            oben: 50px;
            links: 0;
            Breite: 100 %;
            Rahmen links: 1px durchgezogen #FECC5B;
            Rahmen rechts: 1px durchgezogen #FECC5B;
        }
        
        .nav ul li {
            Rahmen unten: 1px durchgezogen #FECC5B;
        }
        
        .nav ul li a:hover {
            Hintergrundfarbe: #FFF5DA;
        }
    </Stil>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</Kopf>
 
<Text>
    <ul Klasse="Navigation">
        <li>
            <a href="#" >Nachricht</a>
            <ul>
                <li>
                    <a href="">Folgen</a>
                </li>
                <li>
                    <a href="">Kommentare</a>
                </li>
                <li>
                    Wie
                </li>
            </ul>
        </li>
        <li>
            <a href="#" >Nachricht</a>
            <ul>
                <li>
                    <a href="">Folgen</a>
                </li>
                <li>
                    <a href="">Kommentare</a>
                </li>
                <li>
                    Wie
                </li>
            </ul>
        </li>
  <li>
      <a href="#" >Nachricht</a>
      <ul>
          <li>
              <a href="">Folgen</a>
          </li>
          <li>
              <a href="">Kommentare</a>
          </li>
          <li>
              Wie
          </li>
      </ul>
  </li>
    </ul>
    <Skript>
        $(Funktion() {
            $(".nav>li").hover(Funktion() {
                $(this).children("ul").slideToggle();
            });
        })
    </Skript>
</body>
 
</html>

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:

Code zur Implementierung des Dropdown-Menüeffekts mit jQuery
Ein super einfaches Dropdown-Menü, implementiert mit jQuery
JQuery-Dropdown-Menü mit Suchfeld
jQuery implementiert den Effekt der Anzeige des sekundären Dropdown-Menüs, wenn die Maus darüber bewegt wird
Ein kleines Beispiel für das Klicken auf ein Dropdown-Menü mit jQuery
JQuery setzt den Wert einer bestimmten Option im Dropdown-Menü (vollständiger)
jQuery steuert das Gleiten in verschiedene Richtungen (Gleiten nach links, rechts usw.)
So erzielen Sie mit jQueryMobile einen gleitenden Seitenumblättereffekt
Horizontale Bildlaufleiste (Schieberegler) basierend auf jQuery
Das mit jQuery geschriebene Menü gleitet von links nach rechts

<<: Öffentliche kostenlose STUN-Server

>>: Detaillierte Schritte zur Neuinstallation von VMware Tools (grafisches Tutorial)

Eine kurze Einführung in MySQL InnoDB ReplicaSet

jQuery realisiert den Gleiteffekt des Dropdown-Menüs

Eine kurze Einführung in MySQL InnoDB ReplicaSet

CentOS 8-Installationsdiagramm (superdetailliertes Tutorial)

MySQL umgeht die Gewährung von information_schema-Objekten und meldet den Fehler ERROR 1044 (4200)

Detaillierte Erläuterung von Django + Vue + Docker zum Erstellen einer Schnittstellentestplattform

So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen

Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung

Implementierung der Deduplizierung von Dateiinhalten sowie von Schnittmengen und Unterschieden in Linux

Welche Vorteile bietet die Verwendung eines B+-Baums als Indexstruktur in MySQL?

HTML-Code Textfeld Eingabe begrenzen Textfeld wird grau Textfeldeingabe begrenzen

So installieren Sie mysql8.0.23 unter Win10 und lösen das Problem „Der Dienst reagiert nicht auf die Steuerfunktion“

Artikel empfehlen

CSS realisiert Div vollständig zentriert, ohne Höhe festzulegen

Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

Die vue-cli-Konfiguration verwendet den vollständigen Prozessdatensatz von Vuex

Detaillierte Einführung in die Bereitstellung eines K8S-Clusters auf einem CentOS7-System

Analyse von 2 Token-Gründen und Beispielcode in der Webprojektentwicklung

VUE+Canvas implementiert den Beispielcode des Desktop-Flipper-Brick-Breaking-Spiels

Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js

So aktivieren Sie die Protokollfunktion für langsame Abfragen in MySQL

Vue implementiert den Anwesenheitskalender von DingTalk

Ubuntu 18.04 installiert MySQL 5.7.23

So implementieren Sie eine bidirektionale MySQL-Sicherung

MySQL deaktiviert die Überprüfung der Kennwortstärke

Verwendung des Array-Filters filter() in JS

Vue implementiert das Senden von Emoticons im Chatfenster

Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays