toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 메뉴 > toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴

해피팀

네티즌

소스분류

메뉴

다운로드 횟수

428 회

간단설명

요즘 사이트를 돌아다니시다 보시면 클릭시 레이어가 자연스럽게 내려오는 형태의 메뉴를 많이 보셧을거예요.. 비슷한 용도로 클릭시에 내려오는 자료입니다.

평가하기

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

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

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

간단하게 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>