Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery CSS3-Faltkarten-Dropdown-Listenfeld, um effect_jquery zu erreichen

WBOY
Freigeben: 2016-05-16 15:34:06
Original
1860 Leute haben es durchsucht

Der Spezialeffekt des jQuery-Dropdown-Listenfelds lässt jedes Listenelement wie eine Karte aussehen. Der Effekt ist sehr gut.

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 Status verwendet wird, ist ein Hyperlink-Element.

<div class="container">
 <div class="card-drop">
  <a class='toggle' href="#">
   <i class='fa fa-suitcase'></i> 
   <span class='label-active'>Everyting</span>
  </a>
  <ul>
   <li class='active'>
    <a data-label="Everyting" href="#"><i class='fa fa-suitcase'></i> Everyting</a>
   </li>
   ......
  </ul>
 </div>
</div>
Nach dem Login kopieren

CSS-Stil
Das a.toggle-Element wird verwendet, um den offenen und geschlossenen Zustand der Dropdown-Liste zu wechseln. Um den Effekt zu erzeugen, dass die Karte beim Klicken nach oben gedreht wird, wird sie mit dem Attribut transform-style:reserve-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 einen Eckdreieckseffekt zu erzeugen.

.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

Wenn Sie Listenelemente wechseln, verwenden Sie einfach jQuery, um deren Eigenschaften „top“, „width“ und „margin-left“ zu ändern, um sie anzuzeigen und auszublenden. Und verwenden Sie Easy-Out als Übergangseffekt für CSS-Animationen.

.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, und sie sind standardmäßig geschlossen.

function setClosed() {
  li.each(function (index) {
    $(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');
  });
  li.addClass('closed');
  toggler.removeClass('active');
}
setClosed();        
Nach dem Login kopieren

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

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

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

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

Das Obige ist der von jQuery und CSS3 erstellte Effekt. Es ist ein sehr cooler Dropdown-Listenfeldeffekt.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage