jQuery-Plugin zur Implementierung eines gestapelten Menüs
|
Jeden Tag ein jQuery-Plugin - gestapeltes Menü. Zu Ihrer Information: Der spezifische Inhalt ist wie folgt Gestapeltes MenüEin mehrseitiger Spezialeffekt Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Gestapeltes Menü</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
* {
Rand: 0px;
Polsterung: 0px;
}
#Boxen {
Position: fest;
oben: 0px;
unten: 0px;
links: 0px;
rechts: 0px;
Hintergrundfarbe: hellgrau;
}
.Kasten {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
Polsterung oben: 10px;
Polsterung links: 70px;
Schriftstärke: fett;
Farbe: weiß;
Übergang: alle 0,5 s linear;
}
.box1 {
Hintergrundfarbe: #1abc9c;
Z-Index: 1;
}
.box2 {
Hintergrundfarbe: #2ecc71;
Z-Index: 2;
}
.box3 {
Hintergrundfarbe: #3498db;
Z-Index: 3;
}
.box4 {
Hintergrundfarbe: #9b59b6;
Z-Index: 4;
}
.box5 {
Hintergrundfarbe: #34495e;
Z-Index: 5;
}
.box6 {
Hintergrundfarbe: #f1c40f;
Z-Index: 6;
}
#btn {
Farbe: Schwarz;
Z-Index: 9;
Position: fest;
Breite: 30px;
Höhe: 30px;
/* Hintergrundfarbe: hellgrau; */
oben: 5px;
links: 10px;
Schriftgröße: 30px;
Cursor: Zeiger;
Übergang: alle 0,3 s linear;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
#btn:hover {
Farbe: weiß;
Schriftstärke: fett;
}
#btn.check {
transformieren: drehen (135 Grad);
Farbe: weiß;
Schriftstärke: fett;
}
.box.check{
Z-Index: 99;
}
.box span{
Cursor: Zeiger;
}
</Stil>
</Kopf>
<Text>
<div id="btn">×</div>
<div id="Boxen">
<div class="box box1" data-index="1"><span>Seite 1</span></div>
<div class="box box2" data-index="2"><span>Seite 2</span></div>
<div class="box box3" data-index="3"><span>Seite 3</span></div>
<div class="box box4" data-index="4"><span>Seite 4</span></div>
<div class="box box5" data-index="5"><span>Seite 5</span></div>
<div class="box box6" data-index="6"><span>Seite 6</span></div>
</div>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion() {
$("#btn").klick(function() {
$(this).toggleClass("prüfen");
wenn($(this).hasClass('check')){
$(".box").removeClass('prüfen');
$(".box").arr().fürJeden(item=>{
var index = parseInt(item.attr("Datenindex"));
Element.css({
'oben':40*Index+'px',
'links':40*Index+'px'
})
})
}anders{
$(".box").arr().fürJeden(item=>{
var index = parseInt(item.attr("Datenindex"));
Element.css({
'oben':'0px',
'links':'0px'
})
})
}
})
$(".box span").klick(function(){
$(".box").parent().removeClass('prüfen');
$(diese).parent().addClass('prüfen');
$("#btn").klick();
})
$.prototype.arr = Funktion() {
var das = dies;
var arr = [];
für (var i = 0; i < diese.Länge; i++) {
arr.push($(das[i]));
}
Rückflug an;
}
})
</Skript>Erklärung der Ideen Die Wirkung des Layouts ist leicht zu verstehen 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:
|
<<: Lösung für das Fehlen einer chinesischen Eingabemethode in Ubuntu
>>: MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter CentOS6.9
Artikel empfehlen
Detailliertes Tutorial zum Erstellen einer Continuous-Integration-Delivery-Umgebung basierend auf Docker+K8S+GitLab/SVN+Jenkins+Harbor
Inhaltsverzeichnis Übersicht zur Umgebungseinrich...
Beispielcode für die Verwendung von Nginx zur Implementierung einer 301-Weiterleitung zum https-Stammdomänennamen
Aus SEO- und Sicherheitsgründen ist eine 301-Weit...
Was ich beim Aufbau meines eigenen Blogs gelernt habe
<br />In einem Jahr Bloggen habe ich persönl...
Lösung für das Problem der Zeilenhöhe der Elementtabellenkopfzeile
Inhaltsverzeichnis Vorwort 1. Ursache des Problem...
Der Unterschied zwischen HTML-Name-ID und Klasse_PowerNode Java Academy
Name Geben Sie einen Namen für das Tag an. Format...
Interpretation und Verwendung verschiedener React-State-Manager
Zunächst müssen wir wissen, was ein Zustandsmanag...
Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?
Bevor wir dieses Problem verstehen, schauen wir u...
Ein kurzes Verständnis der drei Prinzipien zum Hinzufügen von MySQL-Indizes
1. Die Bedeutung von Indizes Indizes werden verwe...
Vier Methoden zur Verwendung von JS zur Bestimmung von Datentypen
Inhaltsverzeichnis Vorwort 1. Art von 2. Instanz ...
Analyse des benutzerdefinierten Überwachungs- und Alarmimplementierungsprozesses von Linux Zabbix
Ziel Zeigen Sie eine der Daten im iostat-Befehl i...
Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats
1. Einleitung Wenn ein Webprojekt auf unserem Lin...
Detaillierte Erklärung zum dynamischen Aktivieren/Deaktivieren der Hyperthreading-Technologie in Linux
Vorwort Mithilfe der Hyperthreading-Technologie v...
Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS
Wenn wir CSS schreiben, vergessen wir manchmal di...
Docker- und Portainer-Konfigurationsmethoden unter Linux
1. Installieren und verwenden Sie Docer CE Dieser...
Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.
1. Hintergrund Vor kurzem stießen einige Freunde ...