Select language

by Juan Muñoz

HTML

<div id="idiomaSele">
  <div id="es" class="activo">Español</div>
  <div id="en">Ingles</div>
  <div id="pt">Portugues</div>
</div>

CSS

#idiomaSele {
    position:relative;
    margin-top:120px;
    font-family:arial;
    font-size:12px;
}

#idiomaSele div {
    padding:10px 15px;
    border-radius:20px;
    background:#e5e5e5;
    border:1px solid #e5e5e5;
    margin-bottom: 5px;
    position:absolute;
    left:0;
    width:90px;
    top:0;
    -webkit-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
}

#idiomaSele div.activo:before {
    content:"<";
    display:block;
    float:right;
    font-weight:bold;
    font-family:arial;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
}

#idiomaSele.open div.activo:before {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#idiomaSele div.activo {
    z-index:10;
}

#idiomaSele.open div:nth-last-child(2) {
    top:-90px;
    -webkit-transition: all 900ms;
    -o-transition: all 900ms;
    transition: all 900ms;
}

#idiomaSele.open div:last-child {
    top:-45px;
}

JavaScript

$('#idiomaSele').hover(
    function(){ $(this).addClass('open') },
    function(){ $(this).removeClass('open') }
)