Как сделать выпадающий список с красивым эффектом на CSS и JQuery.
Всем привет! Сегдня я покажу, как сделать выпадающий список с красивым эффектом на CSS и JQuery.
Посмотреть, как это работает, вы можете здесь
Теперь приступим к созданию
В .html файле пропишем следующую структуру
<div class="drop">
<div class="option active placeholder" data-value="placeholder">
Choose wisely
</div>
<div class="option" data-value="wow">
Wow!
</div>
<div class="option" data-value="drop">
So dropdown!
</div>
<div class="option" data-value="select">
Very select!
</div>
<div class="option" data-value="custom">
Much custom!
</div>
<div class="option" data-value="animation">
Such animation!
</div>
</div>
Стили будут примерно такими. Однако вы можете их менять так, как захотите
$dark: #35414a;
$semilight: #86919a;
$blue: #5aafee;
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@font-face {
font-family: pfs-bold;
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Bold.otf');
}
body {
background: $dark;
}
.drop {
width: 20em;
margin: 5em auto;
font-family: pfs-bold;
color: $semilight;
text-transform: uppercase;
position: relative;
transition: width 0.5s;
will-change: width;
.option {
padding: 1em;
cursor: pointer;
background-color: #485761;
&:not(.active) {
display: none;
opacity: 0;
transform: translateY(-50%);
}
}
&.visible {
animation: bounce 1s;
width: 24em;
&:before, &:after {
border-color: #fff;
}
&:before {
opacity: 0;
}
&:after {
opacity: 1;
}
.option {
color: #fff;
display: block;
}
}
&.opacity {
.option {
transform: translateZ(0);
opacity: 1;
@for $i from 0 to 10 {
&:nth-child(#{$i}) {
transition: opacity 0.5s 0.1s*$i, transform 0.5s 0.1s*$i;
}
}
}
}
&.withBG {
.option {
transition: background-color 0.1s;
&:not(.placeholder):hover {
background-color: $blue;
}
&:not(.placeholder).active {
background-color: $blue;
}
}
}
&:after, &:before {
content: "";
position: absolute;
top: 1.5em;
right: 1em;
width: 0.75em;
height: 0.75em;
border: 0.2em solid $semilight;
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: opacity 0.2s;
}
&:before {
border-left: none;
border-top: none;
top: 1.2em;
}
&:after {
border-right: none;
border-bottom: none;
opacity: 0;
}
}
.mini-hack {
opacity: 0;
transform: translateY(-50%);
}
И, наконец, простой скрипт на JQuery.
$(document).ready(function() {
$(".drop .option").click(function() {
var val = $(this).attr("data-value"),
$drop = $(".drop"),
prevActive = $(".drop .option.active").attr("data-value"),
options = $(".drop .option").length;
$drop.find(".option.active").addClass("mini-hack");
$drop.toggleClass("visible");
$drop.removeClass("withBG");
$(this).css("top");
$drop.toggleClass("opacity");
$(".mini-hack").removeClass("mini-hack");
if ($drop.hasClass("visible")) {
setTimeout(function() {
$drop.addClass("withBG");
}, 400 + options*100);
}
triggerAnimation();
if (val !== "placeholder" || prevActive === "placeholder") {
$(".drop .option").removeClass("active");
$(this).addClass("active");
};
});
function triggerAnimation() {
var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;
$(".drop").css("width", "24em");
setTimeout(function() {
$(".drop").css("width", finalWidth + "em");
}, 400);
}
});
Вот так просто можно сделать красивый выпадающий список на JQuery.
Спасибо за внимание и удачи!
-
Создано 16.09.2014 20:35:44
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.