Skip to content

Instantly share code, notes, and snippets.

@Scretch-1
Last active February 24, 2016 13:54
Show Gist options
  • Save Scretch-1/87288ab885fb48d3445a to your computer and use it in GitHub Desktop.
Save Scretch-1/87288ab885fb48d3445a to your computer and use it in GitHub Desktop.
jQ Выпадающий список (ul) с возможностью выбора (custom, Font Awesome)
//--HTML--//
<div class="select">
<span class="placeholder">Select your language</span>
<ul>
<li>España- Español</li>
<li>United States - English</li>
<li>France - Français</li>
<li>Deutschland - Deutsch</li>
</ul>
</div>
//--end HTML--//
//--CSS--//
//dropdown ul
.select{
position: relative;
display: block;
margin: 0 auto;
width: 100%;
max-width: 325px;
color: #cccccc;
vertical-align: middle;
text-align: left;
user-select: none;
-webkit-touch-callout: none;
.placeholder{
position: relative;
display: block;
background-color: #393d41;
z-index: 1;
padding: 1em;
border-radius: 2px;
cursor: pointer;
&:hover{
background: darken(#393d41,2%);
}
&:after{
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
font-family: 'FontAwesome';
content: '\f078';
z-index: 10;
}
}
&.is-open{
.placeholder:after{
content: '\f077';
}
ul{
display: block;
}
}
&.select--white{
.placeholder{
background: #fff;
color: #999;
&:hover{
background: darken(#fff,2%);
}
}
}
ul{
display: none;
position: absolute;
overflow: hidden;
width: 100%;
background: #fff;
border-radius: 2px;
top: 100%;
left: 0;
list-style: none;
margin: 5px 0 0 0;
padding: 0;
z-index: 100;
li{
display: block;
text-align: left;
padding: 0.8em 1em 0.8em 1em;
color: #999;
cursor: pointer;
&:hover{
background: #4ebbf0;
color: #fff;
}
}
}
}
//--end CSS--//
//--JS--//
//dropdown ul
$('.select').on('click','.placeholder',function(){
var parent = $(this).closest('.select');
if ( ! parent.hasClass('is-open')){
parent.addClass('is-open');
$('.select.is-open').not(parent).removeClass('is-open');
}else{
parent.removeClass('is-open');
}
}).on('click','ul>li',function(){
var parent = $(this).closest('.select');
parent.removeClass('is-open').find('.placeholder').text( $(this).text() );
});
//--end JS--//
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment