그누보드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랑 이벤트를 다르게 적용하시면 되지 않을까요?
제가 PC사이즈에서도 슬라이드 토글로 보여지고 싶다는 이야기를 빼먹었네요. 결국 pc/mobile 같은 기능이 필요합니다 ㅠㅠ
이건 제가 모바일에서 썼던 토글소스인데
한번 활용가능한지 확인해보시고 써보세요 ㅎ
$("#gnb_1dul li.gnb_1dli").each(function(){
var subUl = $(this).find(".gnb_2dul").size();
if(subUl != "0"){
$(this).find(".gnb_1da").click(function(e){
e.preventDefault();
$("#gnb_1dul li.gnb_1dli").find(".gnb_2dul").slideUp(300);
if($(this).parent().find(".gnb_2dul").css("display") == "block"){
$(this).parent().find(".gnb_2dul").slideUp(500);
}else{
$(this).parent().find(".gnb_2dul").slideDown(500);
}
});
}
});
이 소스 적용하고 뭔가 안됐었는데. 기존의 js파일 주석으로 막으니까 정상 작동되네요!! 감사합니다^^
답변을 작성하시기 전에 로그인 해주세요.
