kotak senarai drop-down kad lipat jQuery CSS3 untuk mencapai effect

kotak senarai drop-down kad lipat jQuery CSS3 untuk mencapai effect_jquery

WBOY

Lepaskan： 2016-05-16 15:34:06

asal

1883 orang telah melayarinya

Kesan khas kotak senarai lungsur jQuery menjadikan setiap item senarai kelihatan seperti kad membuka dan menutupnya Kesannya sangat bagus.

Tutorial ringkas
Struktur HTML
Item senarai kesan kotak senarai lungsur ini dibuat menggunakan senarai tidak tertib dan elemen yang digunakan untuk menukar keadaan terbuka dan tertutup ialah elemen hiperpautan.

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

Salin selepas log masuk

Gaya CSS
Elemen a.toggle digunakan untuk menukar keadaan terbuka dan tertutup senarai juntai bawah. Untuk mencipta kesan membalikkan kad apabila diklik, ia ditetapkan dengan atribut transform-style: preserve-3d; Pada masa yang sama, asal-usul transformasi transformasi: 50% 0% diubah suai.

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

Salin selepas log masuk

Tetapi apabila ia aktif, ia akan berputar di sepanjang paksi X dan menggunakan :sebelum dan :selepas unsur pseudo untuk mencipta kesan segi tiga penjuru.

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

Salin selepas log masuk

Apabila menukar item senarai, hanya gunakan jQuery untuk mengubah suai sifat atas, lebar dan kiri margin untuk menunjukkan dan menyembunyikannya. Dan gunakan kemudahan sebagai kesan peralihan animasi 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;
}

Salin selepas log masuk

JavaScript

Dalam kod jQuery, fungsi setClosed() digunakan untuk menutup semua item senarai, dan ia ditutup secara lalai.

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

Salin selepas log masuk

Kemudian dengar acara turun tetikus bagi elemen .toggle, yang menukar keadaan terbuka dan tertutup senarai.

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

Salin selepas log masuk

Akhir sekali, apabila setiap item senarai diklik, kandungan item senarai dipindahkan ke item pertama dan keseluruhan senarai ditutup.

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

Salin selepas log masuk

Di atas adalah kesan yang dicipta oleh jQuery dan CSS3 untuk semua orang Ia adalah kesan kotak senarai lungsur yang sangat keren. Saya harap anda menyukainya