dio-v
5/17/2016 - 2:12 PM

css language select dropdown

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);*/
            }
        }
    }
}