Last active
January 18, 2020 06:18
-
-
Save evdeveloper/5ca9d36e56b1ffd4c08a7a0a143d01e5 to your computer and use it in GitHub Desktop.
Выпадающий список без js или jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Pug | |
mixin SelectBox(name, options) | |
.select-box | |
.select-box__current(tabindex="1") | |
each option, index in options | |
.select-box__value | |
input.select-box__input(type="radio" id=index value=option.value name=name checked) | |
p.select-box__input-text #{option.name} | |
img.select-box__icon(src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true") | |
ul.select-box__list | |
each option, index in options | |
li | |
label.select-box__option(for=index aria-hidden) #{option.name} | |
+SelectBox('Ben', [ | |
{name: 'Cream', value: '1'}, | |
{name: 'Cheese', value: '2'}, | |
{name: 'Milk', value: '3'}, | |
{name: 'Honey', value: '4'}, | |
{name: 'Toast', value: '5'} | |
]) | |
// Scss | |
.select-box { | |
position: relative; | |
display: block; | |
width: 100%; | |
margin: 0 auto; | |
font-family: 'Open Sans', 'Helvetica Neue', 'Segoe UI', 'Calibri', 'Arial', sans-serif; | |
font-size: 18px; | |
color: #60666d; | |
@media (min-width: 768px) { | |
width: 70%; | |
} | |
@media (min-width: 992px) { | |
width: 50%; | |
} | |
@media (min-width: 1200px) { | |
width: 30%; | |
} | |
&__current { | |
position: relative; | |
box-shadow: 0 15px 30px -10px transparentize(#000, 0.9); | |
cursor: pointer; | |
outline: none; | |
&:focus { | |
& + .select-box__list { | |
opacity: 1; | |
// We have to set "animation-name: none;" to make the list visible (read below how it works) | |
animation-name: none; | |
.select-box__option { | |
cursor: pointer; | |
} | |
} | |
.select-box__icon { | |
transform: translateY(-50%) rotate(180deg); | |
} | |
} | |
} | |
&__icon { | |
position: absolute; | |
top: 50%; | |
right: 15px; | |
transform: translateY(-50%); | |
width: 20px; | |
opacity: 0.3; | |
transition: 0.2s ease; | |
} | |
&__value { | |
display: flex; | |
} | |
&__input { | |
display: none; | |
&:checked + .select-box__input-text { | |
display: block; | |
} | |
} | |
&__input-text { | |
display: none; | |
width: 100%; | |
margin: 0; | |
padding: 15px; | |
background-color: #fff; | |
} | |
&__list { | |
position: absolute; | |
width: 100%; | |
padding: 0; | |
list-style: none; | |
opacity: 0; | |
animation-name: HideList; | |
animation-duration: 0.5s; | |
animation-delay: 0.5s; | |
animation-fill-mode: forwards; | |
animation-timing-function: step-start; | |
box-shadow: 0 15px 30px -10px transparentize(#000, 0.9); | |
} | |
&__option { | |
display: block; | |
padding: 15px; | |
background-color: #fff; | |
&:hover, | |
&:focus { | |
color: #546c84; | |
background-color: #fbfbfb; | |
} | |
} | |
} | |
@keyframes HideList { | |
from { | |
transform: scaleY(1); | |
} | |
to { | |
transform: scaleY(0); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment