JQuery + CSS3 fold the card drop-down list box to achieve the effect, jquerycss3

Source: Internet
Author: User

JQuery + CSS3 fold the card drop-down list box to achieve the effect, jquerycss3

The special effects of the jQuery drop-down list box make each item in the list as a card style. Opening and closing the item has the feeling of opening and closing the blinds. The effect is very good and I will share it with you.

Brief tutorial
HTML Structure
The list item of the special effect in the drop-down list box is created using an unordered list. The element used to switch the Open and Close statuses 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
A. the toggle element is used to switch the open and closed statuses of the drop-down list. To make the effect of turning on the card when clicking, It is set with transform-style: preserve-3d; attribute. At the same time, the conversion origin 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 in the active state, it will rotate along the X axis, and use the: before AND: after pseudo elements to createCorner 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, the list items simply use jQuery to modify their top, width, and margin-left attributes to display and hide them. And uses transition-out as the 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, which are disabled 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. In this event, switch the Opening and Closing statuses 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 are the effects of jQuery and CSS3, which are very cool drop-down list box effects.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.