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>

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; }

JavaScript

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