Dies ist ein sehr cooler Dropdown-Listenfeldeffekt im Klappkartenstil, der mit jQuery und CSS3 erstellt wurde. Interessierte Freunde können sich auf den
jQuery-Dropdown-Listenfeldeffekt beziehen, um die einzelnen Elemente zu trennen Alles im Stil einer Karte gemacht. Das Öffnen und Schließen hat das Gefühl, Jalousien zu öffnen und zu schließen. Der Effekt ist sehr gut, ich möchte ihn mit allen teilen.
Kurzes Tutorial
HTML-Struktur
Die Listenelemente dieses Dropdown-Listenfeldeffekts werden mithilfe einer ungeordneten Liste erstellt, und das Element, das zum Wechseln des geöffneten und geschlossenen Zustands verwendet wird, ist ein Hyperlink-Element.
<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-Stil
ein.toggle-Element wird verwendet, um das Öffnen von umzuschalten die Dropdown-Liste und den geschlossenen Status. Um den Effekt zu erzeugen, dass die Karte beim Klicken nach oben gedreht wird, wird sie mit dem Attribut transform-style: yield-3d; Gleichzeitig wird der Ursprung der Transformation transform-origin: 50 % 0 % geändert.
.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;
}Aber wenn es aktiv ist, dreht es sich entlang der X-Achse und verwendet :before und :after Pseudoelemente, um < 🎜 zu erstellen >Eckdreieck-Effekt.
.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
Im jQuery-Code wird die Funktion setClosed() verwendet um alle Listenelemente zu schließen. Sie sind standardmäßig geschlossen.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;
});Über das jQuery-Plug-in Timelinr zur Realisierung von Timeline-Spezialeffekten
JS und CSS zur Realisierung von a Popup-Band, wenn die Maus vorbeigeht Pufferanimationsverlaufseffekt DIV-Box
So implementieren Sie das Ballonspiel in Javascript+CSS3
Das obige ist der detaillierte Inhalt vonKlappkarten-Dropdown-Listenfeld für jQuery und CSS3, um einen Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
