슬라이드 메뉴 만들기( feat.배경 안움직이게 하기)

<style>
    body,
    html {
        width: 100%;
        font-size: 20px;
        position: relative;
    }

    #topbar {
        height: 60px;
        background-color: #2E3539;

    }

    #topbar .logo {
        background-color: #077af4;
        height: 60px;
        width: 60px;
    }

    #topbar .menu_button {
        margin-top: 10px;
        margin-right: 10px;
    }

    #topbar .logo img {
        margin-top: 15px;
        margin-left: 12px;
        display: none;
    }

    .submenu {
        position: absolute;
        width: 220px;
        top: 60px;
        right: -220px;
        background-color: #fa0;
        z-index: 100;
        overflow: scroll;

    }

    .background_dark {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 60px;
        left: 0;
        background-color: #000;
        opacity: 0.5;
        display: none;
        z-index: 10;
    }
</style>


<header id="topbar" class="clearfix">
    <div class="fl logo"><img src="../imgs/birdiechance_logo.svg" alt="" width="60px;">logo</div>
    <div class="fl" style="color:#fff;line-height:65px;text-indent:20px;font-family: 'Gothic A1', sans-serif;font-size:24px;letter-spacing:-1px;"><a href="#">판매자 페이지</a></div>
    <div class="fr menu_button">

     메뉴아이콘
    </div>
</header>
<div class="submenu clearfix">
    <ul class="clearfix">
        <li class="my_gnb01"><a href="http://birdiechance.com/newmim/main/">홈</a></li>
        <li class="my_gnb02"><a href="http://birdiechance.com/newmim/goods/goods_reg_agree.asp">상품등록</a></li>
        <li class="my_gnb04"><a href="http://birdiechance.com/newmim/goods/goods_list.asp">상품관리</a></li>
        <li class="my_gnb03"><a href="http://birdiechance.com/newmim/order/order_list.asp">주문관리</a></li>
        <li class="my_gnb05"><a href="http://birdiechance.com/newmim/order/order_list.asp?menu=return">교환/반품관리</a></li>
        <li class="my_gnb06"><a href="http://birdiechance.com/newmim/setup/modify.asp">판매자정보</a></li>
        <li class="my_gnb07"><a href="http://birdiechance.com/newmim/account/dealer_account.asp">정산관리</a></li>
        <li class="my_gnb08"><a href="http://birdiechance.com/newmim/board/list.asp">운영관리</a></li>
        <li class="my_gnb09"><a href="">판매상품</a></li>
    </ul>
</div>
<div class="background_dark"></div>


    <script>
        
        $('.menu_button').click(function() {
            var submenu_R = parseInt($('.submenu').css('right'));
            
            if (submenu_R < 0) {
               
                $('.background_dark').show(); //body 어둡게
                $('.submenu').css({ height: ($(window).height() - 60) + 'px'}); //디바이스 높이만큼 submenu 높이 적용
                $('body').css({position: 'fixed'}); //body 스크롤 금지
                $('.submenu').animate({right: '0'});  //submenu 슬라이드(show)
                
            } else {
                
                $('.background_dark').hide(); //body 어둡게 해제
                $('.submenu').animate({right: '-220px'}); //submenu 슬라이드(hide)
                $('body').css({position: 'relative'}); //body 스크롤
            }
        });
        
        
        // 어두운 영역 클릭시
        $('.background_dark').click(function() {
            $('.background_dark').hide(); //body 어둡게 해제
            $('.submenu').animate({right: '-220px'}); //submenu 슬라이드(hide)
            $('body').css({ position: 'relative'}); //body 스크롤
        });
        
    </script>

같은 내용이지만 margin값 - 로 코드를 짜는 것보다 position 을 활용하는게 슬라이드 메뉴에서 좀더 부드럽게 되는것같은 느낌