[해피CGI][cgimall] toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴

안녕하세요.. 오랜만에 자료를 올려보내요!

요즘 사이트를 돌아다니시다 보시면 레이어 드랍다운 메뉴들을 많이 보셧을꺼예요

일반적으로도 많이 쓰이고 있지만.. ㅋㅋ


간단하게 jquery 소스 추가로 구현이 가능해서 샘플을 하나 만들어서 업로드를 했습니다.


사용법은 아주 간단해요.. 하지만 css는 기본적으로 조금 아시고 계셔야 하실꺼예요


일단 jquery를 먼저 불어와야 합니다...

당연히 페이지 head사이에 아래의 코드를 넣어주세요


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


그리고 첨부된 layer.html 파일을 열어보시면 여기는 다른 소스코드는 다 생략하고 넣어두었으니..

사용하시는분 환경에 맞게 넣어주세요


동일하게 스크립트도 head사이에 넣어줍니다.


<script type="text/javascript">
 // <![CDATA[
  $(document).ready(function(){
   $('.cate_layer').hide();
   $('.cate_btn').toggle (
    function(){
     $('.cate_layer').slideDown("fast");
     $(".cate_btn").addClass("on");
    },
    function(){
     $('.cate_layer').slideUp("fast");
     $(".cate_btn").removeClass("on");
    }
   );
  });
 // ]]>
</script>


여기서 위 jquery은 처음 출력시 cate_layer 클래스를 .hide 명령어로 기본적으로 감추고 나타나게 됩니다.

그리고 .toggle 명령어로 클릭시 작동을 하게되며 (hovor() *mouseleave mouseenter 등..) cate_la

cate_btn 의 클래스명을 가진 레이어를 클릭하게되면 차례대로 ).slideDown으로 .cate_layer로 지정된

레이어가 내려오게 되며 .addClass 명령어로 .on 클래스가 붙게됩니다

div class="cate_btn on" 이런식으로 붙게 되죠!


그래서 cate_btn의 기본속성에서 on속성을 추가하거나. 변경하시는 방법으로 사용되게 되죠.

그리고 다시 한번 누르게되면 .slideUp으로 레이어가 닫기며 .on 클래스가 removeClass 로 삭제가되는 원리입니다.


html 소스는 아래와 같아요 (css 포함)


<style type="text/css">
 .cate_btn{display:inline-block; word-break:break-all; padding:20px; height:50px; background:#3879D9}
 .on{background:#f40000}
 .cate_layer{margin-top:50px; padding:20px; background:#FFE949}
</style>

<div class="cate_btn">카테고리열림/닫힘버튼</div>

<div class="cate_layer">
 레이어 창입니다.
</div>



위 소스를 활용하셔서 홈페이지 만드실때 도움이 되시길 바래요.. 자세한건 위 데모링크에서 확인하실 수 있어요~~