A barebones slide out navigation using CSS3 translate. Blog post: http://www.miguelmota.com/slide-out-navigation-using-css3-translate/

slide-out-navigation.css

/* Global styles */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	html, body {
		height: 100%;
	}
	body {
		position: relative;
		overflow: hidden;
		font-size: 16px;
		font-family: sans-serif;
	}

	/* Hide nav handler checkbox */
	#nav-handler {
		display: none;
	}

	/* Header */
	#header {
		position: static;
		top: 0;
		left: 0;
		width: 100%;
		height: 75px;
		z-index: 2;
		background: #999;
	}

	/* Header menu button */
	#menu-button {
		display: inline-block;
		float: left;
		line-height: 4.5;
		cursor: pointer;
	}

	/* Header active menu button */
	#nav-handler:checked ~ #menu-button {
		color: #08c;
	}

	/* Slide out navigation */
	#nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 80%;
		height: 100%;
		z-index: 1;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		transition: opacity 0s .25s;
		-moz-transition: opacity 0s .25s;
		-webkit-transition: opacity 0s .25s;
		background: #bbb;
	}

	/* Active slide out navigation */
	#nav-handler:checked ~ #nav {
		opacity: 1;
		transition: opacity 0s 0s;
		-moz-transition: opacity 0s 0s;
		-webkit-transition: opacity 0s 0s;
	}

	/* Slide out navigation list items */
	#nav ul li {
		display: block;
		clear: both;
	}

	#nav ul li a {
		display: block;
		width: 100%;
		height: 100%;
	}

	#main-container {
		display: block;
		position: relative;
		height: 100%;
		transition: -moz-transform .25s ease-in-out;
		-moz-transition: -moz-transform .25s ease-in-out;
		-webkit-transition: -webkit-transform .25s ease-in-out;
		z-index: 5;
	}

	/* Translate main container when nav handler is checked */
	#nav-handler:checked ~ #main-container,
	.nav-handler-checked {
		transform: translate3D(80%,0,0); /* X value must be same as Nav width */
		-moz-transform: translate3D(80%,0,0); /* X value must be same as Nav width */
		-webkit-transform: translate3D(80%,0,0); /* X value must be same as Nav width */
	}

	#content-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 75px 0 0 0; /* Top padding must be same as header height */
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		z-index: -1;
	}

slide-out-navigation.html

<input type="checkbox" id="nav-handler">

	<nav id="nav">
		<ul>
			<li><a href="#">Nav Item 1</a></li>
			<li><a href="#">Nav Item 2</a></li>
			<li><a href="#">Nav Item 3</a></li>
		</ul>
	</nav>

	<main id="main-container">

		<header id="header">
			<label id="menu-button" for="nav-handler">Menu</label>
		</header>

		<section id="content-container">
			<article id="content">
				<p>This is a barebones slide out navigation demo.</p>
			</article>
		</section>

	</main>

slide-out-navigation.js

/* Android support */
if (/Android/i.test(navigator.userAgent)) {
  $('#nav-handler').on('click', function(e){
    e.preventDefault();
    $mainContainer = $('#main-container');
    if ($mainContainer.hasClass('nav-handler-checked')) {
      $mainContainer.removeClass('nav-handler-checked');
    } else {
      $mainContainer.addClass('nav-handler-checked');
    }
  });
}