Як зробити випадаючий список з красивим ефектом на css і jquery.

Відео: Створення меню, що випадає (CSS, JQuery)

Всім привіт! Сегдня я покажу, як зробити список, що випадає з красивим ефектом на CSS і JQuery.

Подивитися, як це працює, ви можете тут

Тепер приступимо до створення

В .html файлі пропишемо наступну структуру

Відео: Меню, що випадає на css

class="Drop"gt; 
class="Option active placeholder"data-value="Placeholder"gt; 
 Choose wisely 
 
class="Option"data-value="Wow"gt; 
 Wow! 
 
class="Option"data-value="Drop"gt; 
 So dropdown! 
 
class="Option"data-value="Select"gt; 
 Very select! 
 
class="Option"data-value="Custom"gt; 
 Much custom! 
 
class="Option"data-value="Animation"gt;
 Such animation!

Стилі будуть приблизно такими. Однак ви можете їх міняти так, як захочете

Відео: jQuery.Урок 4.Раскривающійся список-гармошка

$ 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:5emauto- 
 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 from0 to 10{ 
:nth-child(# {$ I}) { 
transition: opacity 0.5s0.1s*$ i, transform 0.5s0.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) - 
} 
}) -