모바일슬라이드메뉴 관련 스크립트 질문
본문
안녕하세요. 초보 퍼블리셔입니다.
사이트 유지보수를 하며 모바일 슬라이드 메뉴를 만들었는데,
문제점이 있어서 질문 올립니다
메뉴 옆에 어두운 레이어부분 이 마우스로든 핸드폰에서 손가락으로든 슬라이드 했을때
고정되어야하는데 뒷화면이 슬라이드 되어버립니다
( 레이어부분을 누르면 메뉴가 닫히도록 해놔서 핸드폰에서는 메뉴가 꺼지면서 슬라이드됩니다)
그리고 다시 새로고침 하지않고 메뉴를 눌렀을때 메뉴가 나오지 않습니다 ,,ㅠㅠ
레이어부분 슬라이드 되지 않게 하려면 어떻게 해야할까요
그리고 메뉴 다시 눌렀을때 뜨도록 하는법도 알고싶습니다
고수님들 도움 부탁 드립니다ㅠㅠ
*그리고 x버튼이 스크롤되면 같이 딸려올라가는데 이부분도 해결하고싶습니다
너무 초보스러운 질문이라 죄송합니다 ㅠㅠ총체적 난국이네요,,
https://www.connectvalue.net/contents/main/main.asp
사이트 링크 걸어봅니다,,
답변 1
원하시는게 이런건지 모르겠네요. 한번 테스트 파일 만들어서 테스트해보세요.
설명은 주석달린거 말고는 더 해드리기 힘들거 같아요.
주석보시고 한번 적용해보세요.
여러방식이 있겠지만 전 이게 제일 잘 먹히더라구요.
급하게 작성해서 코드가 영 난잡하지만 양해를...
* 핵심적인 부분은 메뉴가 열렸을때, body 부분의 스크롤을 없애주고,
메뉴가 닫히면 다시 body 부분의 스크롤을 정상화 시키는 것이에요.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>모바일 스크롤</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/*
정상상태의 바디
*/
body { height: auto; overflow:visible; }
/*
메뉴가 열린 상태(opened 클래스가 추가되면) 바디의 높이를 뷰포트로 고정하고,
오버플로우를 전부 감춰서 스크롤을 막아버림
*/
body.opened { height: 100vh; overflow:hidden; }
/*
메뉴를 감싼 div는 전체 뷰포트만큼 크기를 만든 후,
왼쪽으로 -100% 해서 감춰주고 시작
*/
#mobile_menu {
position:fixed;
width:100vw;
height:100vh;
top:0;
left:-100vw;
}
/*
메뉴가 열리면(opened 클래스가 추가되면)
left를 이동하여 보이도록 처리한다. 단, 애니메이션을 이곳에 적용하지 않는다.
순간적으로 나와야함
*/
#mobile_menu.opened {
left:0vw;
}
/*
메뉴의 배경 레이어는 전체 크기로 만들고 투명도를 줘서 감춰둔다.
*/
#mobile_menu_background {
display:none;
width: 100vw;
height: 100vh;
background:black;
opacity:0.2;
}
/* 메뉴가 열린 상태의 배경 레이어가 보이도록 처리 */
#mobile_menu.opened #mobile_menu_background {
display:block;
}
/* 메뉴의 실제 부분은 적당한 가로 크기를 지정한 후, 메뉴 감싼 div와 마찬가지로
left를 이동하여 숨겨둔다. left가 변경될대 animation을 적용해두는데,
대체로 빠르면 0.2 보통 0.3을 주면 부드럽다.(개인차 있음). 0.4 이상은 좀 느리다는 느낌적인 느낌
그림자도 일단 없는 상태로 시작
*/
#mobile_menu_content {
position:fixed;
width: 80vw;
height: 100vh;
top:0;
left:-80vw;
transition: left 0.3s;
background: yellow;
box-shadow: none;
}
/* 메뉴가 열렸을 때 메뉴 부분 left를 이동해서 0으로 맞춰주고,
그림자도 넣어준다. */
#mobile_menu.opened #mobile_menu_content {
left: 0vw;
box-shadow: 1px 0px 2px 0px rgba(0,0,0,0.3);
}
/*
이 아래 메뉴 자체의 스크롤 부분은 mobile_menu_content 안에
div를 하나 더 넣고 position:relative를 줘서 고정될 부분과 스크롤 될 부분을
구분해도 된다. 자유롭게 구현 가능. 여기서는 그냥 높이 계산으로 퉁침
단, 고정될 부분의 높이가 변동된다면, 안쓰기를 권장(혹은 자바스크립트로 계산해서 높이 조절을 해도 되긴하는데...)
*/
/* 메뉴에서 고정되어야하는 부분은 높이를 지정 */
#mobile_menu_buttons {
background:red;
height:40px;
}
/* 메뉴에서 스크롤 될 부분은 높이를 고정부분 빼주고, y축만 스크롤을 준다. */
#mobile_menu_list {
width:100%;
height:calc(100% - 40px);
overflow-x:hidden;
overflow-y:auto;
}
</style>
<script>
var mobile_menu_flag = false; // 메뉴가 열려있는지 확인하는 값(기본값은 닫힘)
$(document).ready(function() {
// 터치했을 때 반응해야할 것, 열기버튼 or 닫기버튼 or 배경 레이어
$("#btn1, #btn2, #mobile_menu_background").on("click", function() {
if(mobile_menu_flag) { // 메뉴가 열려있으면 닫고
$("body").removeClass("opened"); // 바디의 스크롤을 원래대로
$("#mobile_menu").removeClass("opened"); // 메뉴를 닫아준다.
} else { // 메뉴가 닫혀있으면 연다.
$("body").addClass("opened"); // 바디의 스크롤을 제거해서 고정함
$("#mobile_menu").addClass("opened"); // 메뉴를 열어준다.
}
mobile_menu_flag = !mobile_menu_flag; // 현재 상태를 저장
});
});
</script>
</head>
<body>
<div id="mobile_menu"> <!--모바일메뉴 감싸기-->
<div id="mobile_menu_background"></div> <!-- 배경 레이어 -->
<div id="mobile_menu_content"> <!-- 실제 메뉴 부분 -->
<div id="mobile_menu_buttons"> <!-- 메뉴에서 상단에 고정되어야 할 것 들 -->
<button type="button" id="btn1">메뉴닫기</button> <!--메뉴를 닫을 버튼 -->
</div>
<div id="mobile_menu_list"> <!-- 메뉴가 많아서 메뉴 자체에 스크롤이 생겨야 할 것들 -->
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
<p style="font-size:40px">메뉴 아무거나 스크롤 생기게</p>
</div>
</div>
</div>
<!--여긴 그냥 바디에 스크롤이 생길만큼 긴 아무 컨텐츠-->
<div>
<button id="btn2" type="button">메뉴열기</button> <!--메뉴를 열 버튼 -->
<br/><br/>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
<p style="font-size:40px">Body 아무거나 스크롤 생기게</p>
</div>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
