Edit in JSFiddle 

$(document).ready(function () {
    $menuLeft = $('.pushmenu-left');
    $nav_list = $('#nav_list');
    $nav_list.click(function(){
        $(this) .toggleClass('active') ;
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
        });
    });
<body class="pushmenu-push">
    <nav class="pushmenu pushmenu-left">
         <h3><i class="glyphicon glyphicon-th-list"></i> Menu</h3>

        <li><a href="#">Beranda</a>

        </li>
        <li><a href="#">Forum</a>

        </li>
        <li><a href="#">Blog</a>

        </li>
        <li><a href="#">About</a>

        </li>
         <h3><i class="glyphicon glyphicon-bullhorn"></i> Social Media</h3>

        <li><a href="#">Facebook</a>

        </li>
        <li><a href="#">Twitter</a>

        </li>
         <h3><i class="glyphicon glyphicon-tags"></i> Trending Topic</h3>

        <li><a href="#">Topic 1</a>

        </li>
        <li><a href="#">Topic 2</a>

        </li>
        <li><a href="#">Topic 3</a>

        </li>
        <li><a href="#">Topic 4</a>

        </li>
        <li><a href="#">Topic 5</a>

        </li>
    </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>
body {
    margin: 0;
}
.pushmenu {
    /*this is the nav*/
    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;
}
.pushmenu li {
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0.5em 1em;
    list-style:none;
    display: block;
    /* drops the nav vertically*/
}
.pushmenu li a {
    font-size: 1em;
    text-decoration: none;
    color:black;
}
.pushmenu li a:hover {
    color:#333;
}
.pushmenu li: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;
    padding: 1em;
}
section.content {
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 20px;
}

External resources loaded into this fiddle: