IBK: Select
JADE
div.lh-select
div.lh-select__placeholder Selecciona
ul.lh-select__list
li.lh-select__option
a(href="#") Opción 01
li.lh-select__option
a(href="#") Opción 02
li.lh-select__option
a(href="#") Opción 03
li.lh-select__option
a(href="#") Opción 04
span.lh-select__arrow
SCSS
.lh-select{
margin: 10px auto;
width: 50%;
cursor: pointer;
position: relative;
font-weight: bold;
&__placeholder{
list-style: none;
border: solid 1px #E7E7E7;
background: #FFFFFF;
padding-left: 20px;
height: 50px;
line-height: 50px;
position: relative;
z-index: 2;
&:hover{
border-color: #E0E0E0;
}
}
&__list{
display: none;
border-style: solid;
border-color: #E7E7E7;
border-radius: 0 0 3px 3px;
border-width: 0 0 1px 0;
box-shadow: 23px 23px 60px rgba(0,0,0,.075);
list-style: none;
margin: 0;
padding-left: 0;
position: relative;
z-index: 1;
}
&__option{
@extend .lh-select__placeholder;
border-width: 1px 1px 0 1px;
&:hover{
background: #FAFAFA;
}
&:last-child{
border-radius: 0 0 3px 3px;
}
a{
color: #333333;
display: block;
text-decoration: none;
}
}
&__arrow{
/*Positioning the arrow*/
content: "";
position: absolute;
z-index: 2;
top: 19px;
right: 19px;
background-color: transparent;
/* Arms */
width: 6px;
border-bottom: 2px solid #5da952;
height: 6px;
border-right: 2px solid #5da952;
/* Rotating */
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
&--active{
@extend .lh-select__arrow;
/* Short arm */
width: 4px;
border-bottom: 2px solid #5da952;
/* Long arm */
height: 9px;
border-right: 2px solid #5da952;
}
}
}
JAVASCRIPT
var $select = $(".lh-select");
var $select_list = $(".lh-select__list");
var $select_item = $(".lh-select__list a");
var $select_arrow = $(".lh-select__arrow");
var $select_placeHolder = $(".lh-select__placeholder");
var selectOpen = function(){
console.log("Select Open");
$select_arrow.addClass('lh-select__arrow--active');
};
var selectClose = function(){
console.log("Select Close");
$select_arrow.removeClass('lh-select__arrow--active');
};
var selectToogle = function(){
if ($select_list.is(":visible")){
selectOpen();
} else{
selectClose();
}
};
$select.click(function(){
$select_list.toggle(0,function(){selectToogle()});
});
$select_item.click(function(){
var newText = $(this).text();
$select_placeHolder.text(newText);
});
