정필성

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

· 2020-02-11 (화) 23:50:11 · 8498 · 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개

2020-02-12 (수) 13:07:48
이런게 팁게에 올라오니 너무 좋네요..
2020-02-12 (수) 18:33:19
유용한 정보 감사합니다.
팁 감사합니다., 스크랩해놓고 사용할때 활용해봐야겠네요
감사합니다
2021-11-04 (목) 14:22:52
훌륭합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
20-03-11 조회 6,336
20-03-09 조회 6,711
20-03-09 조회 4,841
20-03-05 조회 4,551
20-03-05 조회 5,386
20-03-03 조회 8,727
20-03-02 조회 5,529
20-03-02 조회 6,562
20-03-01 조회 2.8만
20-02-28 조회 5,091
20-02-26 조회 5,431
20-02-26 조회 5,184
20-02-24 조회 6,002
20-02-23 조회 4,749
20-02-20 조회 5,904
20-02-18 조회 6,103
20-02-18 조회 4,921
20-02-12 조회 5,663
20-02-11 조회 8,499
20-02-10 조회 6,666
20-02-09 조회 5,165
20-02-09 조회 8,173
20-02-08 조회 4,662
20-02-08 조회 6,386
20-02-08 조회 6,794
20-02-07 조회 6,772
20-02-06 조회 5,665
20-02-05 조회 5,051
20-02-04 조회 5,891
20-02-03 조회 1.8만