JQUERY+CSS3 Folding card Drop-down list box to achieve the effect _jquery

jquery drop-down list box effects make each list item a card style, turn it on and off it has the feeling of opening and closing the blinds, the effect is very good, share to everyone.

Brief tutorial
HTML structure
the Drop-down list box effects list item is made using a sequence-free table, and the element that toggles the open and closed state is a 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>

CSS Styles
The A.toggle element is used to toggle the open and closed state of the Drop-down list. In order to make a click on the effect of the flip card, it was set transform-style:preserve-3d property. At the same time modified the conversion of the Origin transform-origin:50% 0%;

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

But when it is activated, it rotates along the x-axis and uses: Before and: After pseudo elements to make the corner triangle effect .

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

list items simply use jquery to modify their top, width, and Margin-left properties when switching, making them visible and hidden. and use Ease-out as a CSS animation transition effect.

. 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

In the jquery code, the setclosed () function closes all list items, which are closed by default.

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

It then listens for the MouseDown event of the. Toggle element, which toggles the open and closed state of the list.

Toggler.on (' MouseDown ', function () {
  var $this = $ (this);
  if ($this. is ('. Active ')) {
    setclosed ();
  } else {
    $this. addclass (' active ')
    ; Li.removeclass (' closed ');
    Li.each (the function (index) {
      $ (this). CSS ("Top", * (index + 1)). CSS (' width ', ' 100% '). CSS (' margin-left ', ' 0px '); c18/>});
        

Finally, when each list item is clicked, the contents of the list item are moved to the first item, and the entire list is closed.

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

The above is for you to share the effect of jquery and CSS3, very cool Drop-down list box special effects, I hope you like