그누보드5 상단메뉴 토글로 바꾸고 싶은데요. 채택완료
PC 모바일 반응형으로 날코딩으로 만들고 있는 중입니다.
제가 질문드리고 싶은건
그누보드5 베이직에 들어가있는 gnb를 활용하여 모바일 메뉴를 만들었는데.
기존의 jquery.menu.js를 보면
.gnb_1dli > a mousehover시 클래스 추가로 .gnb_2dul 메뉴가 펼쳐지게 까지는 했는데요.
모바일 메뉴를 핸드폰에서 보니 제일 아래에 있는 1뎁스 메뉴가 가려지고
.gnb_1dli > a 클릭시 메뉴다 닫힘이 안되는 문제가 있더라구요. 스크롤도 안되고....ㅎㅎ;;;;
그래서 .gnb_1dli > a 클릭시 .gnb_2dul이 펼쳐졌다가 닫혔다 하는 slideToggle 기능을 활용하고 싶은데요.
jquery.menu.js에서 어떤부분을 수정해야하고 추가해야하는지 감이 안옵니다 ㅠ_ㅠ
혹시 그누보드5 상단메뉴 토글로 바꿔서 사용해보신분 계실까요?
답변 2개
반응형으로 제작하시는거면 gnb의 클래스명을 PC사이즈 일때 클래스명이랑
모바일 사이즈로 변했을 때 클래스명을 다르게 줘서
각 클래스별로 따로 css랑 이벤트를 다르게 적용하시면 되지 않을까요?
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
이건 제가 모바일에서 썼던 토글소스인데
한번 활용가능한지 확인해보시고 써보세요 ㅎ
</p><p>$("#gnb_1dul li.gnb_1dli").each(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>var subUl = $(this).find(".gnb_2dul").size();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(subUl != "0"){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).find(".gnb_1da").click(function(e){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>e.preventDefault();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$("#gnb_1dul li.gnb_1dli").find(".gnb_2dul").slideUp(300);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if($(this).parent().find(".gnb_2dul").css("display") == "block"){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).parent().find(".gnb_2dul").slideUp(500);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}else{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).parent().find(".gnb_2dul").slideDown(500);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인