Hamburger Menu

HTML

<nav>
    <div class="hamburger"></div>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</nav>
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat animi quis laboriosam exercitationem fuga eaque architecto dolores quisquam amet in ex accusamus pariatur voluptatem iusto aspernatur expedita aliquam quas qui!
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>
555
</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,300,600,700);
@import url(http://fonts.googleapis.com/css?family=Vollkorn:400italic,400);

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html, body {
/*     margin:0;
    padding:0; */
    font-family:"Vollkorn", serif;
}
nav {
    position: fixed;
    left:-140px;
    margin-left:140px;
    top:0;
    background:#333;
    color:#fff;
    font-family:"Open Sans", helvetica, arial;
    height:100%;
    padding:20px;
    width:100px;
    transition: .3s all;
}
.hamburger {
    position:absolute;
    position:absolute;
    right:-100px;
    top:0;
    height:40px;
    width:100px;
    cursor:pointer;
}
/* .hamburger:after {
    content:'';
    position:absolute;
    left:.75em;
    top:.95em;
    width: .9em;
    height: 0.125em;
    border-top: 0.375em double #fff;
    border-bottom: 0.125em solid #fff;
} */
.hamburger:after {
    content:'\2630\0000a0\0000a0MENU';
    position:absolute;
    left:0;
    top:0;
    height:40px;
    width:100px;
    text-align:right;
    padding:0 10px 0 0;
    font-size:18px;
    line-height:40px;
    background: #333;
    box-sizing:border-box;
}
nav ul {
    padding:0;
   ...

JavaScript

$('.hamburger').click(function() {
   // $('nav').animate({left: '-140px'}, 0, 'linear');
    $('nav').toggleClass('closed', 0, 'linear');
});