jQuery and CSS3 folding card drop-down list box to achieve effect-JS Tutorial-php.cn

jQuery and CSS3 folding card drop-down list box to achieve effect

不言

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

Original

2310 people have browsed it

This is a very cool folding card-style drop-down list box effect made using jQuery and CSS3. Interested friends can refer to the

jQuery drop-down list box effect to separate each list The items are all made in the style of 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 .

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

Copy after login

CSS stylea.toggle element is used to toggle the opening of the drop-down list and closed status. 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;
}

Copy after login

But when it is activated, it will rotate along the X-axis and be made using :before and :after pseudo-elements

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

Copy after login

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

Copy after login

JavaScript

In jQuery code, setClosed() function Used to close all list items. They are closed by default.

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

Copy after login

Then listen to the mousedown event of the .toggle element, which switches the open and closed state of the list.

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

Copy after login

Finally, when each list item is clicked, the content of the list item is moved to the first item and is closed entirely. list.

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

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the jQuery plug-in Timelinr to implement timeline effects

JS and CSS realize a pop-up band after the mouse passes Buffer animation gradient effect DIV box

How to implement the balloon game in javascript css3

The above is the detailed content of jQuery and CSS3 folding card drop-down list box to achieve effect. For more information, please follow other related articles on the PHP Chinese website!