Klappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielen-js-Tutorial-php.cn

Klappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielen

不言

Freigeben： 2018-06-25 15:16:08

Original

2304 Leute haben es durchsucht

Dies ist ein sehr cooler Dropdown-Listenfeldeffekt im Klappkartenstil, der mit jQuery und CSS3 erstellt wurde. Interessierte Freunde können sich auf den

jQuery-Dropdown-Listenfeldeffekt beziehen, um die einzelnen Elemente zu trennen Alles im Stil einer Karte gemacht. Das Öffnen und Schließen hat das Gefühl, Jalousien zu öffnen und zu schließen. Der Effekt ist sehr gut, ich möchte ihn mit allen teilen.

Kurzes Tutorial
HTML-Struktur
Die Listenelemente dieses Dropdown-Listenfeldeffekts werden mithilfe einer ungeordneten Liste erstellt, und das Element, das zum Wechseln des geöffneten und geschlossenen Zustands verwendet wird, ist ein Hyperlink-Element.

<p class="container">
 <p class="card-drop">
  <a class=&#39;toggle&#39; href="#">
   <i class=&#39;fa fa-suitcase&#39;></i> 
   <span class=&#39;label-active&#39;>Everyting</span>
  </a>
  <ul>
   <li class=&#39;active&#39;>
    <a data-label="Everyting" href="#"><i class=&#39;fa fa-suitcase&#39;></i> Everyting</a>
   </li>
   ......
  </ul>
 </p>
</p>

Nach dem Login kopieren

CSS-Stil
ein.toggle-Element wird verwendet, um das Öffnen von umzuschalten die Dropdown-Liste und den geschlossenen Status. Um den Effekt zu erzeugen, dass die Karte beim Klicken nach oben gedreht wird, wird sie mit dem Attribut transform-style: yield-3d; Gleichzeitig wird der Ursprung der Transformation transform-origin: 50 % 0 % geändert.

.card-drop > a.toggle {
 position: relative;
 z-index: 100;
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -moz-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 -moz-transition: linear 0.1s;
 -o-transition: linear 0.1s;
 -webkit-transition: linear 0.1s;
 transition: linear 0.1s;
}

Nach dem Login kopieren

Aber wenn es aktiv ist, dreht es sich entlang der X-Achse und verwendet :before und :after Pseudoelemente, um < 🎜 zu erstellen >Eckdreieck-Effekt.

.card-drop > a.toggle:active {
 -moz-transform: rotateX(60deg);
 -webkit-transform: rotateX(60deg);
 transform: rotateX(60deg);
}
.card-drop > a.toggle:active:after {
 -moz-transform: rotateX(180deg);
 -webkit-transform: rotateX(180deg);
 transform: rotateX(180deg);
}
.card-drop > a.toggle:before, .card-drop > a.toggle:after {
 content: "";
 position: absolute;
}
.card-drop > a.toggle:before {
 right: 25px;
 top: 50%;
 margin-top: -2.5px;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 6px solid rgba(0, 0, 0, 0.8);
}
.card-drop > a.toggle.active:before {
 transform: rotate(180deg);
}

Nach dem Login kopieren

Verwenden Sie beim Wechseln von Listenelementen einfach jQuery, um ihre Attribute „oben“, „breite“ und „rand links“ zu ändern, um sie anzuzeigen und auszublenden. Und verwenden Sie „ease-out“ als CSS-animierten Übergangseffekt.

.card-drop ul {
 position: absolute;
 height: 100%;
 top: 0;
 display: block;
 width: 100%;
}
.card-drop ul li {
 margin: 0 auto;
 -moz-transition: all, ease-out 0.3s;
 -o-transition: all, ease-out 0.3s;
 -webkit-transition: all, ease-out 0.3s;
 transition: all, ease-out 0.3s;
 position: absolute;
 top: 0;
 z-index: 0;
 width: 100%;
}
.card-drop ul li a {
 border-top: none;
}
.card-drop ul li a:hover {
 background-color: #4aa3df;
 color: #f3f9fd;
}
.card-drop ul li.active a {
 color: #fff;
 background-color: #258cd1;
 cursor: default;
}
.card-drop ul li.closed a:hover {
 cursor: default;
 background-color: #3498db;
}

Nach dem Login kopieren

JavaScript

Im jQuery-Code wird die Funktion setClosed() verwendet um alle Listenelemente zu schließen. Sie sind standardmäßig geschlossen.

function setClosed() {
  li.each(function (index) {
    $(this).css(&#39;top&#39;, index * 4).css(&#39;width&#39;, width - index * 0.5 + &#39;%&#39;).css(&#39;margin-left&#39;, index * 0.25 + &#39;%&#39;);
  });
  li.addClass(&#39;closed&#39;);
  toggler.removeClass(&#39;active&#39;);
}
setClosed();

Nach dem Login kopieren

Hören Sie sich dann das Mousedown-Ereignis des .toggle-Elements an, das den offenen und geschlossenen Status der Liste wechselt.

toggler.on(&#39;mousedown&#39;, function () {
  var $this = $(this);
  if ($this.is(&#39;.active&#39;)) {
    setClosed();
  } else {
    $this.addClass(&#39;active&#39;);
    li.removeClass(&#39;closed&#39;);
    li.each(function (index) {
      $(this).css(&#39;top&#39;, 60 * (index + 1)).css(&#39;width&#39;, &#39;100%&#39;).css(&#39;margin-left&#39;, &#39;0px&#39;);
    });
  }
});

Nach dem Login kopieren

Wenn schließlich auf jedes Listenelement geklickt wird, wird der Inhalt des Listenelements zum ersten Element verschoben und die Liste vollständig geschlossen.

links.on(&#39;click&#39;, function (e) {
  var $this = $(this), label = $this.data(&#39;label&#39;);
  icon = $this.children(&#39;i&#39;).attr(&#39;class&#39;);
  li.removeClass(&#39;active&#39;);
  if ($this.parent(&#39;li&#39;).is(&#39;active&#39;)) {
    $this.parent(&#39;li&#39;).removeClass(&#39;active&#39;);
  } else {
    $this.parent(&#39;li&#39;).addClass(&#39;active&#39;);
  }
  toggler.children(&#39;span&#39;).text(label);
  toggler.children(&#39;i&#39;).removeClass().addClass(icon);
  setClosed();
  e.preventDefault;
});

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Über das jQuery-Plug-in Timelinr zur Realisierung von Timeline-Spezialeffekten

JS und CSS zur Realisierung von a Popup-Band, wenn die Maus vorbeigeht Pufferanimationsverlaufseffekt DIV-Box

So implementieren Sie das Ballonspiel in Javascript+CSS3

Das obige ist der detaillierte Inhalt vonKlappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!