제이쿼리 ... 막혀서 조심스럽게 질문좀 드려도될까요 ㅠㅠ
본문
< script>
$(function(){
//btn_ef
$("#mainpage").css("margin-left", "-300px");
});
$(document).ready(function(){
$("#navigation li a").on("click", function(e){
e.preventDefault();
var hrefval = $(this).attr("href");
if(hrefval == "#about") {
var distance = $('#mainpage').css('right');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
openSidepage();
} else {
closeSidepage();
}
}
});
// end click event handler
$("#navigation li a").on("hover", function(){
var classval = $(this).hasClass("hovertrigger");
if(classval == true) {
var distance = $('#mainpage').css('left');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
openSidepage();
}
}
}); // end hover event handler
$("#closebtn").on("click", function(e){
e.preventDefault();
closeSidepage();
}); // end close button event handler
function openSidepage() {
$('#mainpage').animate({
right: '-300px'
}, 600, 'easeOutBack');
}
function closeSidepage(){
$("#navigation li a").removeClass("open");
$('#mainpage').animate({
right: '0px'
}, 600, 'easeOutQuint');
}
});
</script>
여기에서 반응형처럼
창크기가 1500 이하로 됬을경우엔
$(function(){
//btn_ef
$("#mainpage").css("margin-left", "-300px");
});
이게
$(function(){
//btn_ef
$("#mainpage").css("margin-left", "0px");
});
이어야하구요
하단에
function openSidepage() {
$('#mainpage').animate({
right: '-300px'
}, 600, 'easeOutBack');
}
이부분이
function openSidepage() {
$('#mainpage').animate({
right: '300px'
}, 600, 'easeOutBack');
}
이렇게 되어야하는데.. 지금 이게 가능한건가요.ㅠㅠ
답변 1
왠만하면, 반응형 처리는 jquery 보다 css로 처리하시는게 좋으실거 같아요.
#mainpage { margin-left: -300px;right: -300px; }
@media (max-width: 1500px) {
#mainpage {
margin-left: 0px;
right: 300px;
}
}
이렇게 하시면 아마 깔끔하실겁니다.