Simple Responsive Off-Canvas Menu

HTML

<a href="#" class="switch"></a>

CSS

@media only screen and (max-width: 47.99em) {
    .offcanvas {
        overflow: hidden;
        position: fixed;
    }
    
    .offcanvas header {
        left: 75%;
        right: -75%;
    }
    
    .offcanvas .viewport {
        left: 75%;
        overflow: hidden;
    }
    
    .offcanvas .sidebar {
        left: 0;
        z-index: 999;
    }
    
    .offcanvas .overlay {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 998;
    }
}

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function() {
            $('a.switch').on('click', function(e) {
                e.preventDefault();
                var body = $('body');
                if(body.hasClass('offcanvas')) {
                    var offset = -parseInt(body.css('top'));
                    body.removeClass('offcanvas').css('top', 0).scrollTop(offset);
                } else {
                    body.css('top', -window.pageYOffset+'px').addClass('offcanvas');
                }
            });
        });
    </script>

Demo
(resize the window to see the menu)

This code is written by Mariusz Kuta