scottsb/gist:ebd4e00be4eb2cb18cc2

## gistfile1.html
<html>
<head>
<style type="text/css">
	body {
		font-family: helvetica, sans-serif;
		margin: 0;
	}
	p {
		margin: 0 0 1em;
	}

	#menustate {
		position: absolute;
		visibility: hidden;
	}

	#wrapper {
		left: 0;
		padding: 1em;
		position: relative;
		transition: 0.5s;
	}
	#menustate:checked + #wrapper {
		left: -200px;
		transition: 0.5s;
	}

	#menubutton {
		background: blue;
		color: white;
		cursor: pointer;
		float: right;
		margin: 0 0 1em 1em;
		padding: 0.5em;
	}

	#menu {
		background: darkgreen;
		height: 100%;
		position: fixed;
		right: -200px;
		top: 0;
		transition: 0.5s;
		width: 200px;
	}
	#menustate:checked + #wrapper #menu {
		right: 0;
		transition: 0.5s;
	}
</style>
</head>
<body>
	<input type="checkbox" name="menustate" id="menustate">
	<div id="wrapper">
		<div id="menu"></div>
		<label id="menubutton" for="menustate">MENU</label>

		<p>Ut in interdum sapien. Sed pellentesque maximus leo, ac mattis nibh tincidunt non. Donec dictum ullamcorper ante, id placerat nibh vestibulum quis. Donec lobortis massa nisi, ut feugiat dui faucibus vel. Quisque quam lorem, viverra quis neque ut, semper aliquet leo. Fusce tempus urna in velit posuere, nec pharetra enim dignissim. Vivamus mollis elementum tortor ac commodo. Sed non dui eu dui consequat laoreet non nec purus. Phasellus rhoncus lobortis enim ut feugiat. Vivamus sed laoreet nisl. Pellentesque maximus euismod metus id molestie. Vestibulum consequat quam non felis egestas malesuada. Nam ultricies sit amet nibh sed posuere. Praesent scelerisque erat efficitur nulla tempor posuere. Morbi congue pretium sollicitudin. Curabitur ut posuere justo.</p>
		<p>Sed tempus dui purus, ac gravida augue luctus eget. Nullam ultrices vitae quam non pellentesque. Ut vel mauris quis elit mollis commodo. Donec semper urna leo, ut convallis augue ornare quis. Nunc sed sapien lorem. Maecenas lectus elit, accumsan in sapien quis, fringilla elementum ipsum. Praesent et urna vulputate, semper erat sit amet, aliquam ex. Nunc non commodo enim. Fusce a ante risus. Duis non tristique felis. Fusce dictum mollis dolor id luctus. In sit amet fringilla ligula, sed imperdiet arcu. Ut porttitor, leo non blandit posuere, elit purus tempus metus, sed auctor nisi mauris ut diam. In nulla nisl, rhoncus eget libero et, aliquet facilisis diam. Donec faucibus nisi felis, nec luctus sapien rhoncus vitae.</p>
	</div>
</body>
</html>
	<html>
	<head>
	<style type="text/css">
	body {
	font-family: helvetica, sans-serif;
	margin: 0;
	}
	p {
	margin: 0 0 1em;
	}

	#menustate {
	position: absolute;
	visibility: hidden;
	}

	#wrapper {
	left: 0;
	padding: 1em;
	position: relative;
	transition: 0.5s;
	}
	#menustate:checked + #wrapper {
	left: -200px;
	transition: 0.5s;
	}

	#menubutton {
	background: blue;
	color: white;
	cursor: pointer;
	float: right;
	margin: 0 0 1em 1em;
	padding: 0.5em;
	}

	#menu {
	background: darkgreen;
	height: 100%;
	position: fixed;
	right: -200px;
	top: 0;
	transition: 0.5s;
	width: 200px;
	}
	#menustate:checked + #wrapper #menu {
	right: 0;
	transition: 0.5s;
	}
	</style>
	</head>
	<body>
	<input type="checkbox" name="menustate" id="menustate">
	<div id="wrapper">
	<div id="menu"></div>
	<label id="menubutton" for="menustate">MENU</label>

	<p>Ut in interdum sapien. Sed pellentesque maximus leo, ac mattis nibh tincidunt non. Donec dictum ullamcorper ante, id placerat nibh vestibulum quis. Donec lobortis massa nisi, ut feugiat dui faucibus vel. Quisque quam lorem, viverra quis neque ut, semper aliquet leo. Fusce tempus urna in velit posuere, nec pharetra enim dignissim. Vivamus mollis elementum tortor ac commodo. Sed non dui eu dui consequat laoreet non nec purus. Phasellus rhoncus lobortis enim ut feugiat. Vivamus sed laoreet nisl. Pellentesque maximus euismod metus id molestie. Vestibulum consequat quam non felis egestas malesuada. Nam ultricies sit amet nibh sed posuere. Praesent scelerisque erat efficitur nulla tempor posuere. Morbi congue pretium sollicitudin. Curabitur ut posuere justo.</p>
	<p>Sed tempus dui purus, ac gravida augue luctus eget. Nullam ultrices vitae quam non pellentesque. Ut vel mauris quis elit mollis commodo. Donec semper urna leo, ut convallis augue ornare quis. Nunc sed sapien lorem. Maecenas lectus elit, accumsan in sapien quis, fringilla elementum ipsum. Praesent et urna vulputate, semper erat sit amet, aliquam ex. Nunc non commodo enim. Fusce a ante risus. Duis non tristique felis. Fusce dictum mollis dolor id luctus. In sit amet fringilla ligula, sed imperdiet arcu. Ut porttitor, leo non blandit posuere, elit purus tempus metus, sed auctor nisi mauris ut diam. In nulla nisl, rhoncus eget libero et, aliquet facilisis diam. Donec faucibus nisi felis, nec luctus sapien rhoncus vitae.</p>
	</div>
	</body>
	</html>