css language select dropdown
//mobile fix language menu
$('.language-select > ul').each(function(){
var vMenu = $(this);
var langTimeout = '';
vMenu.bind('mouseleave', function (e) {
langTimeout = setTimeout(function () {
vMenu.removeClass('hover');
}, 500);
});
vMenu.find('a.selected').bind('touchstart mouseenter', function (e) {
clearTimeout(langTimeout);
if (vMenu.hasClass('hover')) {
vMenu.removeClass('hover');
} else {
vMenu.addClass('hover');
}
e.preventDefault();
return false;
}).find('a.selected').bind('click touchmove mouseleave touchstart touch', function (e) {
e.preventDefault();
return false;
});
});
@brandColor1:red;
@langselHeight:54px;
@langselWidth:120px;
.language-select {
position:relative;
z-index:10;
color: #fff;
float:right;
width: @langselWidth;
height:@langselHeight;
ul{
margin: 0; padding: 0;
list-style-type: none;
/*margin-right:4px;*/
position:absolute;
top: @langselHeight;
right:0;
z-index:9999;
li{
list-style:none;
margin-top:@langselHeight;
margin-bottom: 0;
a{
color:#FFF;
display:none;
filter: alpha(opacity=0);
border-bottom:none;
opacity: 0;
min-width:@langselWidth;
height:0;
.transition(opacity 500ms ease-in-out);
margin-top:-@langselHeight;
padding: 15px 2rem;
line-height: normal;
background-color: @brandColor1Light;
text-align:left;
&:hover{
background-color: @brandColor1;
color:#fff;
}
&.selected{
padding: 0 2rem 0 2rem;
line-height: @langselHeight;
position:absolute;
right:0;
top:-@langselHeight;
height:auto;
margin-top:0;
display:block;
opacity: 1;
&:after{
content:"›";
line-height:@langselHeight/3-4;
.rotate(90deg);
font-size:24px;
position:absolute;
right:10px;
top:@langselHeight/3;
height:18px;
width:18px;
text-align:center;
background-color:@brandColor1;
.border-radius(9px);
}
&:hover{
color:#FFF;
background-color: @brandColor1;
}
}
}
}
&:hover, &.hover{ /*ul-hover*/
overflow:visible;
a{
height:auto;
margin-left:0;
position:relative;
left:0;
filter: alpha(opacity=100);
opacity: 1;
display:block;
/*.transition(opacity 500ms ease-in-out);*/
}
}
}
}