[script] 언어 선택 - 아래로 내려오는 리스트_toggle

 

 

select 태그처럼 아래로 내려오게 하는 script

 

언어 선택 및 여러가지 리스트 스타일이 아래로 내려오는 fadeToggle 제이쿼리.

클릭했을때 배경 및 화살표 이미지가 바뀌면서 

하위 리스트들이 보여짐.

 

$(document).ready(function(){
  $('.lang').click(function(){
    $(this).toggleClass('on');
    $(this).find('.sub_lang').fadeToggle(300);
  });
});

<div class="lang">
  <span>LANGUAGE</span>
  <ul class="sub_lang">
    <li class="on"><a href="#">KOR</a></li>
    <li><a href="#">ENG</a></li>
    <li><a href="#">JAP</a></li>
  </ul>
</div>

.lang{position:absolute; right:92px; top:30px; display:inline-block; width:140px; height:40px; border:1px solid #dfdfdf; border-radius:25px; background:#dfdfdf url("화살표 이미지 주소") 85% center no-repeat;}
.lang.on{background:url("화살표 이미지 주소") 85% center no-repeat; border:none;}
.lang.on span{color:#006891;}
.lang span{display:block; padding-left:20px; color:#232323; font-size:14px; line-height:40px; cursor:pointer;}
.lang span.on .sub_lang{display:block;}
.lang .sub_lang{display:none; position:absolute; left:-1px; top:0; width:140px; padding: 40px 0 15px; border-radius:20px; background-color:#232323; z-index:-1;}

.lang .sub_lang li a{display:block; padding-left:20px; text-align:left; color:#006891; font-size:14px; line-height:24px;}
.lang .sub_lang li.on a{color:#fff;}