정필성

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

· 2020-02-11 (화) 23:50:11 · 9792 · 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,789건
+
제목 글쓴이 날짜 조회
20-03-12 조회 6,530
20-03-11 조회 7,751
20-03-09 조회 8,110
20-03-09 조회 6,249
20-03-05 조회 5,840
20-03-05 조회 6,664
20-03-03 조회 9,996
20-03-02 조회 6,817
20-03-02 조회 7,811
20-03-01 조회 2.9만
20-02-28 조회 6,328
20-02-26 조회 6,692
20-02-26 조회 6,439
20-02-24 조회 7,234
20-02-23 조회 5,956
20-02-20 조회 7,139
20-02-18 조회 7,327
20-02-18 조회 6,165
20-02-12 조회 6,947
20-02-11 조회 9,793
20-02-10 조회 7,923
20-02-09 조회 6,428
20-02-09 조회 9,454
20-02-08 조회 5,931
20-02-08 조회 7,716
20-02-08 조회 8,070
20-02-07 조회 8,033
20-02-06 조회 6,934
20-02-05 조회 6,290
20-02-04 조회 7,187