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

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

QA

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

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

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

 


$("#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);
				}
				
			});
		}
		
	});
답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색
filter #gnb ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT