Cacher is the code snippet organizer for pro developers

.off-canvas { // the side panel
		position: fixed;
		top: 0;
		left: -300px;
		width: 300px;
		height: 100%;
		padding: 15px;
		overflow: hidden;
		background-color: #f5f5f5;

		-moz-transition: 300ms ease all;
		-ms-transition: 300ms ease all;
		-o-transition: 300ms ease all;
		
		// Snappy movement for webkit
		-webkit-transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1);
		transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1);
		
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
.show-nav { // the open state

	.wrapper { // main container
		-moz-transform: translate3d(300px, 0, 0);
		-ms-transform: translate3d(300px, 0, 0);
		-o-transform: translate3d(300px, 0, 0);
		-webkit-transform: translate3d(300px, 0, 0);
		transform: translate3d(300px, 0, 0);
	}

	.off-canvas { // side panel
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

<script>
      // Toggles a show-nav class on the body element
			$(function() {
				$('.toggle').click(function() {
					if ($('body').hasClass('show-nav')) {
					  // side panel closed
						$('body').removeClass('show-nav');
					} else {
						// side panel open
						$('body').addClass('show-nav');
					}
				});
			});
</script>