레프트 메뉴 클릭시 닫히게 하고 싶습니다~

레프트 메뉴 클릭시 닫히게 하고 싶습니다~

QA

레프트 메뉴 클릭시 닫히게 하고 싶습니다~

답변 1

본문

안녕하세요~

우측 햄버거 버튼 클릭시 펼쳐졌던 레프트 메뉴가

메뉴 클릭시 다시 원래대로 닫히게 하고 싶습니다~

한 페이지에서 이동되는 형식의 구조라서요~~

혹시 방법이 있을까요~?

 

아래는 현재 스크립트입니다~

도움주시면 감사하겠습니다~

 

------------------------------------------------------------------


<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로