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
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:
|
Artikel empfehlen
Node.js verwendet die Express-Fileupload-Middleware zum Hochladen von Dateien
Inhaltsverzeichnis Initialisieren des Projekts Sc...
Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann
Zwei kleine Probleme, die mich aber lange Zeit ges...
Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3
Das dürfte etwas sein, was viele Leute gemacht ha...
Praktische Fähigkeiten, die beim Aufrufen von UNI-APP-Komponenten im easycom-Modus beherrscht werden müssen
Dieser Artikel soll als Ausgangspunkt für Diskuss...
Eine kurze Analyse der vsftpd-Dienstkonfiguration unter Linux (anonym, Benutzer, virtueller Benutzer)
vsftpd Übersicht vsftpd ist die Abkürzung für „ve...
So installieren und konfigurieren Sie WSL unter Windows
Was ist WSL Zitat aus der Baidu-Enzyklopädie: Das...
Beispiel für die Implementierung des Lastausgleichs mit Nginx+SpringBoot
Einführung in den Lastenausgleich Bevor wir die L...
Schritte zum Reparieren einer Beschädigung der Datei grub.cfg im Linux-System
Inhaltsverzeichnis 1. Einführung in die grub.cfg-...
Spezielle Methode zum Hinzufügen von Fremdschlüsseleinschränkungen in MySQL
Die Betriebsumgebung dieses Tutorials: Windows 7-...
Was sind die Unterschiede zwischen xHTML- und HTML-Tags?
Alle Tags müssen klein geschrieben sein In XHTML m...
Detailliertes Tutorial zur Installation und Verwendung von Kong API Gateway mit Docker
1 Einleitung Kong ist kein einfaches Produkt. Das...
Detaillierter Prozess der Installation und Bereitstellung von OnlyOffice in Docker
0. Systemanforderungen CPU I5-10400F oder höher S...
Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs
Problembeschreibung: Code kopieren Der Code laute...
Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann
Verwenden Sie den folgenden Befehl, um einen Cont...
Die Eisernen Gesetze der MySQL-Datenbank (Zusammenfassung)
Gute Datenbankspezifikationen tragen dazu bei, di...