시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 메뉴 > toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴 상세정보
사이트등록
현재접속자 새로고침
toggle을 이용한 addClass와 removeClass 를 이용한 레이어 메뉴
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 메뉴
다운로드 횟수 319 회
간단설명 요즘 사이트를 돌아다니시다 보시면 클릭시 레이어가 자연스럽게 내려오는 형태의 메뉴를 많이 보셧을거예요.. 비슷한 용도로 클릭시에 내려오는 자료입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기가 없습니다 스크랩하기

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

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

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


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



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

 


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
찾고있던 소스였습니다..감사합니다!
2018-11-27 16:11:51
쵸무
찬성 2
반대 1
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 14336088 보이는 도배방지키를 입력하세요.