Creare un menu off-canvas con CSS3

HTML

<div class="demo-content">
	<input type="checkbox" id="offcanvas-toggle" />
	<ul class="offcanvas">
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Lorem ipsum</a></li>
		<li><a href="#">Lorem ipsum</a></li>
	</ul>
	<div class="wrapper">
		<nav>
			<label for="offcanvas-toggle">&equiv;</label>
		</nav>
		<div class="container">
			<h1>Offcanvas menu in CSS3</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem temporibus nisi beatae aperiam, similique quia voluptatibus, doloremque amet voluptatum pariatur fugiat ipsam iusto distinctio deserunt quam totam facere? Itaque, eaque?</p>
			<p>Sunt nostrum nisi at officiis non hic maxime asperiores laudantium necessitatibus nihil possimus, laborum nemo quod blanditiis optio iste voluptatum tempora, distinctio in? Aperiam velit accusamus placeat saepe possimus id.</p>
			<p>Modi nobis nulla magni animi voluptates debitis placeat dignissimos beatae eius sapiente, cupiditate ad, dolorum, impedit necessitatibus quod nisi. Magni, eum unde corporis esse dolorum architecto in voluptatem provident dolor?</p>
			<p>Ullam delectus, nobis distinctio. Laborum ex possimus esse dolore vitae atque voluptatem, quidem. Aliquid reprehenderit ab ipsum dolor, vitae possimus dolores magnam consequatur quaerat perspiciatis aut, totam asperiores, error iste.</p>
			<p>Aliquam iste sunt vitae repudiandae. Odit illo labore explicabo eligendi alias dolorum nostrum libero magnam perferendis laudantium voluptatibus ratione, provident saepe impedit, omnis eveniet magni itaque. Eligendi, reprehenderit fugit explicabo.</p>
		</div>
	</div>
</div>

<!-- Credits -->
<div class="credits">
	<a class="btn-credits" href="https://code4life.it/guide/creare-un-menu-off-canvas-con-css3/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Creare un menu off-canvas con CSS3
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/creare-un-menu-off-canvas-con-css3/
 */
 
/* Required snippet style */
.wrapper { transition: all 0.25s; }

.offcanvas {
	background: #33b5e5;
	bottom: 0;
	left: 0;
	padding: 4rem 0;
	position: fixed;
	top: 0;
	width: 320px;
	transform: translateX( -100% );
	transition: all 0.25s;
}

.offcanvas li { padding: 0 1rem; }

.offcanvas li a {
	color: #fff;
	display: block;
	padding: 1rem;
	text-decoration: none;
	transition: all 0.25s;
}

.offcanvas li a:hover { background: #185571; }

#offcanvas-toggle { display: none; }

#offcanvas-toggle:checked ~ .offcanvas { transform: translateX( 0 ); }

#offcanvas-toggle:checked ~ .wrapper { transform: translateX( 320px ); }

label[for="offcanvas-toggle"] {
	cursor: pointer;
	font-size: 3rem;
}

/* Demo style only */
.demo-content { margin-bottom: 70px; }

* {
	font-family: 'Roboto', sans-serif;
	margin: 0;
	padding: 0;
}

.container {
	margin: auto;
	padding: 5rem 0;
	width: 80%;
}

nav {
	background: #33b5e5;
	color: #fff;
	padding: .5rem 3rem;
}

h1 {
	font-size: 2.5rem;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

p {
	font-size: 1rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}
 
/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px; left: 0; padding: 10px; position: fixed; right: 0; text-align: center; z-index: 1000; }
.btn-credits { border: 2px solid #33b5e5; border-radius: 10em; color: #33b5e5 !important; display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; line-height: 1.25; padding: .85rem 2.13rem;  text-decoration: none; text-transform: uppercase; transition: .2s ease-out; vertical-align: middle; }
.btn-credits:hover { background-color: #33b5e5; color: #fff !important; }