테스트 사이트 - 개발 중인 베타 버전입니다

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

용디자이너 1년 전 조회 3,836

안녕하세요~

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

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

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

혹시 방법이 있을까요~?

 

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

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

 

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


<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개

채택된 답변
+20 포인트
1년 전

</p>

<p><script>

function sidebar_menu_hide() {

        $('.menu_bg').hide(); 

        $('.sidebar_menu').animate({

            right: '-' + 50 + '%'

                    },function(){

                        $('.sidebar_menu').hide();          

                    });  

}</p>

<p> </p>

<p>$(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);</p>

<p>});</p>

<p></script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

용디자이너
1년 전
디자이너라서 인터넷에 긁은 소스로 끙끙하고있었는데
너무 감사드립니다!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인