윈도우 리사이즈시에 적용하는 반응형 메뉴

nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015.11.09 13:36:38 4901 (121.♡.♡.146)

답변 1

본문

아래와 같은 코드로 반응형 메뉴 토글을 만들었습니다.

그런데 ios8에서는 스크롤만으로도 윈도우 리사이즈가 되더라구요...

그래서, 이 코드를 윈도우의 가로폭 만으로 리사이즈를 적용시키고 싶은데,

적는 방법을 모르겠습니다.


/* slideToggle */
	$("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
 	 });
 	 $(window).resize(function(){
 	   var win = $(window).width();
  	   var p = 768;
 	   if(win < p){
		$("#menu").show();
  	  } else {
 	     $("#menu").hide();
 	   }
	  });

검색을 해보니 아래와 같이 해결할 수 있다고 하는데,

저는 가로폭 768px이하로만 적용하고 싶어서...

설명이 잘 되었는지 모르겠지만, 잘 부탁드립니다.

 
var windowWidth = $(window).width();
$(window).resize(function(){
        var ww = $(window).width();
        if(windowWidth != ww) {
 
                //리사이즈 시에 실행하는 처리
 
                windowWidth = ww;
        }
});

#javascript #jquery

답변 1

thisgun 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2015-11-09 14:20:38 106.♡.♡.28

이렇게 할수 있습니다.


/* slideToggle */
$("#toggle").click(function(){
    $("#menu").slideToggle();
    return false;
});
 
//문서를 처음으로 로드시 윈도우창의 width를 저장한다.
var windowWidth = $(window).width();
 
$(window).resize(function(){
    var win = $(window).width();
    var p = 768;
 
    if(windowWidth != win) {     //리사이즈 이벤트가 일어났을때 windowWidth에 저장한 값과 비교하여 값이 틀리면
        
        windowWidth = win;   //windowWidth에 현재 width값을 저장하고 아래 구문을 실행한다.
 
        //리사이즈 시에 실행하는 처리
        if(win < p){
            $("#menu").show();
        } else {
            $("#menu").hide();
        }
    }
});