Simple Hamburger Menu

HTML

<div class="mobile-nav">
		    <div class="menu-btn" id="menu-btn">
				<div></div>
				<span></span>
				<span></span>
				<span></span>
		    </div>
		 
		     <div class="responsive-menu">
		        <ul>
					<li data-slide="2"><a href="">My Story</a></li>
					<li data-slide="3"><a href="">Businesses</a></li>
					<li data-slide="4"><a href="">History</a></li>
					<li data-slide="5"><a href="">Recognitions &amp; Awards</a></li>
					<li data-slide="6"><a href="">Philanthropy</a></li>
					<li data-slide="7"><a href="">Blog</a></li>
					<li data-slide="8"><a href="">Contact</a></li>
		        </ul>
		     </div>
		</div>
<div class="overlay"></div>

CSS

.mobile-nav { z-index: 9999; position: absolute; right: 35px; top: 100px; width: 20px; }
.menu-btn div { position: absolute; left: 100%; top: 64%; padding-right: 8px; margin-top: -0.50em; line-height: 1.2; font-size: 18px; font-weight: 200; vertical-align: middle; z-index: 99; }
.menu-btn span { display: block; width: 19px; height: 3px; margin: 4px 0; background: #000; z-index: 99; }
.responsive-menu { max-height: 0; background-color: rgba(0,0,0,0.5); width: 300px; overflow: hidden; transition: all .25s; position: absolute; left: -245px; text-align: left; }
.responsive-menu ul { padding: 20px 0 0 20px; }
.responsive-menu ul li { padding-bottom: 20px; }
.responsive-menu a { text-decoration: none; color: #fff;}
.expand {max-height: 300px; }
.overlay {
position: fixed;
width: 100%;
height:100%;
background:#000;
opacity: .5;
display:none;
}
.overlay.open {
display:block
}

JavaScript

jQuery(function(){
    	    $( '.menu-btn' ).click(function(){
    	       $('.responsive-menu').toggleClass('expand');
             $('.overlay').toggleClass('open');            
    	    });  
          $('.overlay').click(function(){
          $('.menu-btn').trigger('click');
          });
        });