본문 바로가기
웹프로그래밍/Javascript|JQuery|Jsp

브라우저 사이즈에 따라 탑메뉴 조정

by Seras 2017. 9. 19.
반응형



브라우저 사이즈에 따라 탑메뉴 조정


$(document).ready(function(){

//새로 고침 했을 경우 사이즈를 체크 하여 display 속성을 변경해줌

if($(window).width() < 1379){  

$('#header_area #topmenu li').css('display','none');

}else{

$('#header_area #topmenu li').css('display','block');

}

//브라우저사이즈가 변경될때마다  체크 하여 display 속성을 변경해줌

$(window).resize(function(){

if($(window).width() < 1379){  

//창을 줄여봤을때  1379 보다 작아지면 탑메뉴 li를 숨긴다.(겹쳐지기 때문)

$('#header_area #topmenu li').css('display','none');

}else{

//창이 다시 커질 경우 보여준다.

$('#header_area #topmenu li').css('display','block');

}

});

});


응용해서 하시길 바랍니당~!

반응형