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:

jQuery-basierter Implementierungscode für sekundäre Verknüpfungsmenüs
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 implementiert anklickbaren, einziehbaren und erweiterbaren Menüeffektcode
Das mit jQuery geschriebene Menü gleitet von links nach rechts
Einfache Implementierung von Folding-Menü-Code basierend auf JQuery
jQuery-Code zum Erzielen eines links- und rechtsseitigen Schiebemenüeffekts

<<: Lösung für das Fehlen einer chinesischen Eingabemethode in Ubuntu

>>: MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter CentOS6.9