메뉴슬라이드 만들기

Document

    /* 삼단바 누르면 메뉴슬라이드나옴 */
    *{margin: 0;padding: 0;font: inherit;color: inherit;}
    ul{list-style: none;}
    

    .menu{
        position: fixed;
        top: 0;left: -100%;
        width: 100%;height: 100%;
        background: #f00;
        transition: 0.3s;
    }

    .menu.on{
        left: 0;
    }

</style>

메뉴버튼1 메뉴버튼2

<div class="menu">
    <a href="" class="close">닫기</a>
</div>



<script src="./jquery-3.6.4.min.js"></script>
<script>
    $(function(){//로드 후 실행.. 
        
        $('.btn1').click(function(){
            $('.menu').addClass('on')
        })

        $('.btn2').click(function(e){//e:이벤트
            e.preventDefault();//링크이벤트막기
            $('.menu').addClass('on')
        })

        $('.close').click(function(e){//e:이벤트
            e.preventDefault();//링크이벤트막기
            $('.menu').removeClass('on')
        })
    })//지우지 마세요..
</script>