Offset canvas push menu

index.html

<div id="offmenu">
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</div>

<i id="push" class="fa fa-bars"></i>

<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>
<div class="box">Off set menu</div>

main.js

// Demo online: http://jsfiddle.net/x4dw7txo/

//offset menu to choose another system
$('#push').click(function() {
    var $body = $('body');
    $('body').addClass('offset-menu-animation');

    //disabling body scroll
    $body.addClass('noScrollbar');

    //chaning the burger menu icon to an X
    $(this).toggleClass('fa-bars').toggleClass('fa-times');

    //making it synchronous
    setTimeout(function(){
        $body.toggleClass('offset-menu-active');

        //after animation finishes
        setTimeout(function(){
            $body.removeClass('offset-menu-animation');

            //enabling body scroll when the menu gets closed
            if(!$body.hasClass('offset-menu-active')){
                $body.toggleClass('noScrollbar');
            }
        },600);
    });

});

styles.css

html,body{
    height: 100%;
    margin: 0;
    padding:0;
}
body {
    background:red;
}
body.noScrollbar{
	overflow: hidden;
}
body.offset-menu-active{
    position: relative;
    overflow: hidden;
    transform: translate3d(300px, 0,0);
    -webkit-transform: translate3d(300px,0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
}
#offmenu{
    left: -400px;
    position:absolute;
    top:0;
    width: 400px;
    background:black;
	position:absolute;
	background:#393939;
	z-index: 100;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.offset-menu-animation{
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.box{
    width:100%;
    padding: 20px;
    margin: 0 0 50px 50px;
    background:grey;
}
#push{
	font-size: 33px;
	position: absolute;
	top: 14px;
	left: 14px;
	right: 0;
	margin: 0 auto;
	cursor:pointer;
}
#push:hover{
	color: #fff;
}