Push Left Menu Simple with jQuery

http://blog.kangrian.com

HTML

<body class="pushmenu-push">
    <nav class="pushmenu pushmenu-left">
         <h3>Menu</h3>
 <a href="#">Home</a>
 <a href="#">Nav2</a>
 <a href="#">Nav3</a>
 <a href="#">Nav4</a>
 <a href="#">Nav5</a>
 <a href="#">Nav6</a>
 <a href="#">Nav7</a>

    </nav>
    <div class="container">
        <div class="main">
            <section class="buttonset">
                <div id="nav_list">Menu</div>
            </section>
            <section class="content">
                 <h1>Slideout Navigation</h1>

                <p></p>
            </section>
            <!-- End Content -->
        </div>
        <!-- End Main -->
    </div>
    <!-- End Container -->
</body>

CSS

body {
    margin: 0;
}
.pushmenu {
    /*this is the nav*/
    background: #3c3933;
    font-family: Arial, Helvetics, sans-serif;
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
    position:fixed;
}
.pushmenu h3 {
    color: #cbbfad;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    margin: 0;
    background: #282522;
    height: 16px;
}
.pushmenu a {
    display: block;
    /* drops the nav vertically*/
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-top: 1px solid #56544e;
    border-bottom: 1px solid #312e2a;
    padding: 14px;
}
.pushmenu a:hover {
    background:#00A287;
}
.pushmenu a:active {
    background: #454f5c;
    color: #fff;
}
.pushmenu-left {
    left: -240px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 240px;
}
/*Transition*/
 .pushmenu, .pushmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#nav_list {
    background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
    cursor: pointer;
    height: 27px;
    width: 33px;
    text-indent: -99999em;
}
nav-list.active {
    background-position: -33px top;
}
.buttonset {
    background: #00A287;
    height: 16px;
    padding: 10px 20px 20px;
}
section.content {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
}

JavaScript

$(document).ready(function () {
    var $menuLeft = $('.pushmenu-left'),
        $nav_list = $('#nav_list'),
        $pushMenu = $('.pushmenu-push');

    $nav_list.click(function () {
        $(this).toggleClass('active');
        $pushMenu.toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
    }).add($menuLeft).click(function (e) {
        e.stopPropagation();
    });

    $(window).click(function () {
        $nav_list.removeClass('active');
        $pushMenu.removeClass('pushmenu-push-toright');
        $menuLeft.removeClass('pushmenu-open');
    });
});