jQuery CSS3 liste déroulante des cartes pliantes pour obtenir effect_jquery

L'effet spécial de la liste déroulante jQuery fait ressembler chaque élément de la liste à une carte. L'ouvrir et la fermer donne la sensation d'ouvrir et de fermer des stores. L'effet est très bon, j'aimerais le partager avec tout le monde.

Bref tutoriel
Structure HTML
Les éléments de liste de cet effet de zone de liste déroulante sont créés à l'aide d'une liste non ordonnée, et l'élément utilisé pour changer les états ouvert et fermé est un élément de lien hypertexte.

<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>

Style CSS
L'élément a.toggle est utilisé pour changer l'état ouvert et fermé de la liste déroulante. Afin de créer l'effet de retourner la carte lorsque vous cliquez dessus, elle est définie avec l'attribut transform-style:preserve-3d; Dans le même temps, l'origine de la transformation transformation-origine : 50% 0% est modifiée.

.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;
}       

Mais lorsqu'il est actif, il tournera le long de l'axe X et utilisera les pseudo-éléments :before et :after pour créer un effet de triangle d'angle.

.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);
}        

Lorsque vous changez d'éléments de liste, utilisez simplement jQuery pour modifier leurs propriétés top, width et margin-left afin de les afficher et de les masquer. Et utilisez la facilité de sortie comme effet de transition d'animation CSS.

.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;
}        

JavaScript

Dans le code jQuery, la fonction setClosed() est utilisée pour fermer tous les éléments de la liste, et ils sont fermés par défaut.

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();        

Écoutez ensuite l'événement mousedown de l'élément .toggle, qui change l'état ouvert et fermé de la liste.

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');
    });
  }
});        

Enfin, lorsque vous cliquez sur chaque élément de la liste, le contenu de l'élément de la liste est déplacé vers le premier élément et la liste entière est fermée.

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;
});        

Ce qui précède est l'effet créé par jQuery et CSS3 pour tout le monde. C'est un effet de liste déroulante très cool. J'espère que vous l'aimerez.