윈도우 리사이즈시에 적용하는 반응형 메뉴
본문
아래와 같은 코드로 반응형 메뉴 토글을 만들었습니다.
그런데 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;
}
});
답변 1
이렇게 할수 있습니다.
/* 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();
}
}
});
해결 되었습니다. 정말 감사합니다 ^^
건님은 정말 대단해요!! -ㅅ -b
감사합니다 ^__^
이 소스를 어디에 써먹는거에요?
나나티 님이 궁금해하시는 거라 굉장히 유용하게 써먹을 수 있을 것 같은데,
초보자라 ........ 흩어져 있는 구슬에 지나지 않네요. ㅡㅡ;
답변을 작성하시기 전에 로그인 해주세요.
