윈도우 리사이즈시에 적용하는 반응형 메뉴 채택완료
아래와 같은 코드로 반응형 메뉴 토글을 만들었습니다.
그런데 ios8에서는 스크롤만으로도 윈도우 리사이즈가 되더라구요...
그래서, 이 코드를 윈도우의 가로폭 만으로 리사이즈를 적용시키고 싶은데,
적는 방법을 모르겠습니다.
</font></p><p><font face="나눔고딕, NanumGothic">/* slideToggle */</font></p><p><font face="나눔고딕, NanumGothic"><span class="Apple-tab-span" style="white-space:pre"> </span>$("#toggle").click(function(){</font></p><p><font face="나눔고딕, NanumGothic"> $("#menu").slideToggle();</font></p><p><font face="나눔고딕, NanumGothic"> return false;</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> });</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> $(window).resize(function(){</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> var win = $(window).width();</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> var p = 768;</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> if(win < p){</font></p><p><font face="나눔고딕, NanumGothic"><span class="Apple-tab-span" style="white-space:pre"> </span>$("#menu").show();</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> } else {</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> $("#menu").hide();</font></p><p><font face="나눔고딕, NanumGothic"> <span class="Apple-tab-span" style="white-space:pre"> </span> }</font></p><p><font face="나눔고딕, NanumGothic"><span class="Apple-tab-span" style="white-space:pre"> </span> });</font></p><p><font face="나눔고딕, NanumGothic">
</font></p><p> </p><p><font face="나눔고딕, NanumGothic">
검색을 해보니 아래와 같이 해결할 수 있다고 하는데,
저는 가로폭 768px이하로만 적용하고 싶어서...
설명이 잘 되었는지 모르겠지만, 잘 부탁드립니다.
</p><p>var windowWidth = $(window).width();</p><p>$(window).resize(function(){</p><p> var ww = $(window).width();</p><p> if(windowWidth != ww) {</p><p> </p><p> //리사이즈 시에 실행하는 처리</p><p> </p><p> windowWidth = ww;</p><p> }</p><p>});</p><p>답변 1개
이렇게 할수 있습니다.
</p><p>/* slideToggle */</p><p>$("#toggle").click(function(){</p><p> $("#menu").slideToggle();</p><p> return false;</p><p>});</p><p> </p><p>//문서를 처음으로 로드시 윈도우창의 width를 저장한다.</p><p>var windowWidth = $(window).width();</p><p> </p><p>$(window).resize(function(){</p><p> var win = $(window).width();</p><p> var p = 768;</p><p> </p><p> if(windowWidth != win) { //리사이즈 이벤트가 일어났을때 windowWidth에 저장한 값과 비교하여 값이 틀리면</p><p> </p><p> windowWidth = win; //windowWidth에 현재 width값을 저장하고 아래 구문을 실행한다.</p><p> </p><p> //리사이즈 시에 실행하는 처리</p><p> if(win < p){</p><p> $("#menu").show();</p><p> } else {</p><p> $("#menu").hide();</p><p> }</p><p> }</p><p>});</p><p>답변에 대한 댓글 3개
나나티 님이 궁금해하시는 거라 굉장히 유용하게 써먹을 수 있을 것 같은데,
초보자라 ........ 흩어져 있는 구슬에 지나지 않네요. ㅡㅡ;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
건님은 정말 대단해요!! -ㅅ -b