함수 질문
본문
$(document).ready(function(){
var globa_menuyn = true;
var globa_height = 275; //gnb 서브메뉴 높이
$(".main-nav").mouseenter(function(){
var sammenu = "";
if( $(".res-nav_click").css("display") == "none"){
if( globa_menuyn ){
globa_menuyn = false;
//서브메뉴 높이
//globa_height = $(".main-sub-nav").height();
//$(".main-sub-nav").css({"height":"0px"});
$(".main-sub-nav").stop().show().animate({"height" : globa_height+"px"}, 800, "swing", function(){});
}
}
});
$(".header").mouseenter(function(){
closemenu();
});
$(".main-sub-nav").mouseleave(function(){
closemenu();
});
function closemenu(){
if( $(".res-nav_click").css("display") == "none"){
if( !globa_menuyn ){
globa_menuyn = true;
$(".main-sub-nav").stop().animate({"height" : "0px"}, 500, "swing", function(){
$(".main-sub-nav").hide();
//$(".main-sub-nav").css({"height":globa_height+"px"});
});
}
}
};
});
위의 소스에서 var globa_height = 275; //gnb 서브메뉴 높이
height값이 고정인데요
반응형 사이즈에 따라서 높이값이 달라지게 하고싶습니다..
어떻게 소스를 수정해야 할까요???
답변 2
브라우저 크기에 따라 높이가 달려져야 할 값을 미리 정해두고 if 나 switch로 값을 변경하시는게 제일 좋아보입니다.
현재 코드가 가로 1280 이상으로 맞춰져 있을테니
뭐 800 이하는 높이 230
600이하는 높이 200
이런씩으로 하면 되지 않을까요?
개발자가...아니라서...소스를...직접 짜는건 못해서요...수정이야 대애애충 하는데...ㅜ
1. 구글에 검색하셔서 자바스크립트로 브라우저의 가로크기를 구하는 방법에 대해 알아보세요.
2. 가로크기가 구해지면 대애애충 어떤 크기로 접속되면 어떻게 보여질지 머릿속에 그리고 그 크기대로 세로 높이를 정해주시면 됩니다. (근데 직접 확인해 보지 않는 이상 이상하게 나올거에요.)
3. 자바스크립트 if 문에 대해 구글에 검색하셔서 1번, 2번을 적용하시면 됩니다.
var globa_height = 275; ---> 이 높이가 변경되어야 하는 목표잖아요.
그걸 if 문으로 아래처럼 처리하시는 겁니다.
가로가 1280 보다 크면 메뉴 높이가 275
가로가 1280보다 작고 800보다 크면 메뉴 높이가 230
가로가 800보다 작고 600보다 크면 메뉴 높이가 210
이런씩으로요.
어렵게라도 수정하실 수 있다면 이 부분도 가능하실 겁니다.
답변을 작성하시기 전에 로그인 해주세요.
