레프트 메뉴 클릭시 닫히게 하고 싶습니다~
본문
안녕하세요~
우측 햄버거 버튼 클릭시 펼쳐졌던 레프트 메뉴가
메뉴 클릭시 다시 원래대로 닫히게 하고 싶습니다~
한 페이지에서 이동되는 형식의 구조라서요~~
혹시 방법이 있을까요~?
아래는 현재 스크립트입니다~
도움주시면 감사하겠습니다~
------------------------------------------------------------------
<script>
$(document).ready(function(){
$('.menu_btn>a').on('click', function(){
$('.menu_bg').show();
$('.sidebar_menu').show().animate({
right:0
});
});
$('.close_btn>a').on('click', function(){
$('.menu_bg').hide();
$('.sidebar_menu').animate({
right: '-' + 50 + '%'
},function(){
$('.sidebar_menu').hide();
});
});
});
</script>
<div class="header">
<div class="menu_logo">
<img src="images/logo.png">
</div>
<div class="menu_btn">
<a href="#">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjQgNmgtMjR2LTRoMjR2NHptMCA0aC0yNHY0aDI0di00em0wIDhoLTI0djRoMjR2LTR6Ii8+PC9zdmc+">
</a>
</div>
</div>
<div class="menu_bg"></div>
<div class="sidebar_menu">
<div class="close_btn"><a href="#">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuOTU0IDIxLjAzbC05LjE4NC05LjA5NSA5LjA5Mi05LjE3NC0yLjgzMi0yLjgwNy05LjA5IDkuMTc5LTkuMTc2LTkuMDg4LTIuODEgMi44MSA5LjE4NiA5LjEwNS05LjA5NSA5LjE4NCAyLjgxIDIuODEgOS4xMTItOS4xOTIgOS4xOCA5LjF6Ii8+PC9zdmc+">
</a>
</div>
<ul class="menu_wrap">
<li><a href="#main_visual">About</a></li>
<li><a href="#main_con01_warp">Review</a></li>
<li><a href="#main_con02_warp">Class</a></li>
<li><a href="#main_con03_warp">Tip</a></li>
<li><a href="#main_con04_warp">Youtube</a></li>
<li><a href="#main_con05_warp">J-curve</a></li>
</ul>
</div>
답변 1
<script>
function sidebar_menu_hide() {
$('.menu_bg').hide();
$('.sidebar_menu').animate({
right: '-' + 50 + '%'
},function(){
$('.sidebar_menu').hide();
});
}
$(document).ready(function(){
$('.menu_btn>a').on('click', function(){
$('.menu_bg').show();
$('.sidebar_menu').show().animate({
right:0
});
});
$('.close_btn>a').on('click', sidebar_menu_hide);
$('.menu_wrap>li>a').on('click', sidebar_menu_hide);
});
</script>
디자이너라서 인터넷에 긁은 소스로 끙끙하고있었는데
너무 감사드립니다!!
