테스트 사이트 - 개발 중인 베타 버전입니다

닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴

· 5년 전 · 6810 · 5

<style>
    #gnb_all{width:100%;height:30%; background:red; display:none; position:absolute; color:#fff; z-index:99999; text-align:center; margin:0px auto}
    .gnb_menu_btn{width:300px; margin:0 auto; cursor:pointer; text-align:center; padding:10px; border-radius:5px; border:solid 1px #ddd}
</style>

<div class="gnb_menu_btn">버튼을 누르세요</div>
<div id="gnb_all">something I want to show</div>

<script>//닫기 버튼 없이도 토글하면 사라지고, 다른영역 클릭시 사라지는 전체보기 메뉴
  $(document).ready(function(){
      $('.gnb_menu_btn').click(function(event){
          event.stopPropagation();
           $("#gnb_all").slideToggle("slow");
      });
      $("#gnb_all").on("click", function (event) {
          event.stopPropagation();
      });
  });
  $(document).on("click", function () {
      $("#gnb_all").hide();
  });
</script>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

5년 전
이런게 팁게에 올라오니 너무 좋네요..
5년 전
유용한 정보 감사합니다.
팁 감사합니다., 스크랩해놓고 사용할때 활용해봐야겠네요
감사합니다
4년 전
훌륭합니다.

게시글 목록

번호 제목
22896
22895
22885
22875
22872
22862
22860
22855
22849
22846
22824
22812
22809
22801
22795
22786
22765
22756
22739
22735
22685
22639
22636
22607
22605
22603
22592
22583
22578
22577