Home >Web Front-end >JS Tutorial >jQuery CSS3 folding card drop-down list box to achieve effect_jquery

jQuery CSS3 folding card drop-down list box to achieve effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:34:061863browse

The jQuery drop-down list box special effect makes each list item look like a card. Opening and closing it has the feeling of opening and closing blinds. The effect is very good. I would like to share it with everyone.

Brief tutorial
HTML structure
The list items of this drop-down list box effect are made using an unordered list, and the element used to switch the open and closed states 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 style
The a.toggle element is used to switch the open and closed state of the drop-down list. In order to create the effect of flipping the card up when clicked, it is set with the transform-style: preserve-3d; attribute. At the same time, the origin of the transformation transform-origin: 50% 0%; is modified.

.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 active, it will rotate along the X-axis and use :before and :after pseudo-elements to create a 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);
}        

When switching list items, simply use jQuery to modify their top, width and margin-left properties to show and hide them. And use ease-out as 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 jQuery code, the setClosed() function is used to close all list items, and they 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();        

Then listen to the mousedown event of the .toggle element, which switches 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(function (index) {
      $(this).css('top', 60 * (index + 1)).css('width', '100%').css('margin-left', '0px');
    });
  }
});        

Finally, when each list item is clicked, the content of the list item is 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 the effect created by jQuery and CSS3 for everyone. It is a very cool drop-down list box effect. I hope you like it

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn