그누보드5 상단메뉴 토글로 바꾸고 싶은데요.

그누보드5 상단메뉴 토글로 바꾸고 싶은데요.

QA

그누보드5 상단메뉴 토글로 바꾸고 싶은데요.

답변 2

본문

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랑 이벤트를 다르게 적용하시면 되지 않을까요?

이건 제가 모바일에서 썼던 토글소스인데

한번 활용가능한지 확인해보시고 써보세요 ㅎ

 


$("#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);
				}
				
			});
		}
		
	});
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #gnb ×
전체 21
© SIRSOFT
현재 페이지 제일 처음으로