jQuery-Plugin zum Implementieren eines schwebenden Menüs

Lernen Sie jeden Tag ein schwebendes jQuery-Plug-In kennen. Der spezifische Inhalt ist zu Ihrer Information wie folgt:

Schwebendes Menü

Dies ist ein weiterer sehr häufiger Effekt, der ein gemeinsames Merkmal des A-Tags verwendet - Anker

Die Wirkung ist wie folgt

Codeabschnitt

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <title>Schwebendes Menü</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <Stil>
   *{
    Rand: 0px;
    Polsterung: 0px;
    Benutzerauswahl: keine;
   }
   .Artikel{
    Rand: 1px durchgehend hellgrau;
    Rand: 10px;
    Höhe: 400px;
    Rahmenradius: 5px;
    Position: relativ;
   }
   .Kopf{
    Hintergrundfarbe: hellgrau;
    Höhe: 30px;
    Anzeige: Flex;
    Inhalt ausrichten: Flex-Start;
    Elemente ausrichten: zentrieren;
    Texteinzug: 10px;
    Position: absolut;
    oben: 0px;
    Breite: 100 %;
   }
   .fbox{
    Position: fest;
    oben: 20 %;
    unten: 20 %;
    rechts: 20px;
    Breite: 150px;
    Rand: 1px durchgehend hellgrau;
    Hintergrundfarbe: weiß;
    Rahmenradius: 5px;
   }
   .hauptsächlich{
    Position: absolut;
    oben: 30px;
    Breite: 100 %;
    unten: 0px;
    Überlauf: automatisch;
   }
   .main ul{
    Rand links: 30px;
   }
   A{
    Farbe: grau;
   }
  </Stil>
 </Kopf>
 <Text>
 </body>
</html>
<Skript>
 $(Dokument).bereit(Funktion(){
  //Test-Dom hinzufügen und Testdaten generieren var arr = [];
  für(var i = 0;i<50;i++){
   var id = "id"+i;
   var $dom = $("<div class='item' id='"+id+"'><div class='head'>"+id+"</div></div>");
   $dom.appendTo($("body"));
   arr.push(ich);
  }
  //Methode $.fmenu(arr) aufrufen;
 })
 $.extend({
  fmenu:Funktion(arr){
   $(".fbox").entfernen();
   var $fbox = $("<div class='fbox'></div>");
   var $head =$("<div class='head'>Schwebendes Menü</div>");
   var $main = $("<div class='main'></div>");
   var $ul = $("<ul Klasse='ul'></ul>")
   $ul.appendTo($main);
   $head.appendTo($fbox);
   $main.appendTo($fbox);
   $fbox.appendTo($("body"));
   arr.fürJeden(item=>{
    var $li = $("<li><a href='#"+item+"'>"+item+"</a></li>");
    $li.appendTo($ul);
   })
  }
 })
</Skript>

Erklärung der Ideen

Der „a“-Tag wird nicht nur für Hyperlinks verwendet, sondern kann auch als Kanal zum Herunterladen von Dateien und zur Navigation zu Dokumentspeicherorten genutzt werden.
Wenn Sie beispielsweise über einen Satz von Attributen verfügen, die auf der aktuellen Seite zu finden sind, wie etwa #id und .class, können Sie mit js den ausgewählten Pfad und anschließend seine Dokumenthöhe abrufen und den Browser anschließend auf die entsprechende Höhe scrollen lassen.
Und a.href entspricht direkt dem ausgewählten Objekt, sodass der Ankerpunkt direkt an der entsprechenden Stelle platziert werden kann.

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:

So implementieren Sie mit CSS3+JQuery ein schwebendes Wandmenü
JQuery ermittelt die Größe des visuellen Bereichs und des Dokuments und erstellt ein Beispiel für ein schwebendes Menü
jQuery+CSS3 implementiert ein festes oberes Navigationsmenü mit schwebendem Effekt, das das Blütenblattnetzwerk imitiert
jQuery-Implementierung des sekundären Menüeffekts beim Bewegen der Maus

<<: Lösung für den Fehler beim Laden der dynamischen Bibliothek, wenn ein Linux-Programm ausgeführt wird

>>: FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung