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

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

QA

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

본문

안녕하세요~

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

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

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

혹시 방법이 있을까요~?

 

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

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

 

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


<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT