這是一款使用jQuery和CSS3製作的效果非常酷炫的折疊卡片式下拉列錶框特效，感興趣的小伙伴們可以參考一下
jQuery下拉列錶框特效將每一個列表項都製作為卡片的樣式，打開和關閉它有打開和關閉百葉窗的感覺，效果非常不錯，分享給大家。
#簡單教學
##HTML結構
<p class="container">
<p 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>
</p>
</p>CSS樣式
.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;
}但它處於啟動狀態的時候，它會沿著X軸進行旋轉，並使用:before和:after偽元素來製作
角部三角形效果
.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);
}.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
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();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');
});
}
});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;
});以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
關於jQuery外掛程式Timelinr 實作時間軸特效
#####
以上是jQuery和CSS3折疊卡片式下拉列錶框實現效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
