Como criar um menu clicável apenas com CSS

Neste tutorial veremos como criar aquele botão que quando clicado expande todo o menu, vi este recurso e fiquei impressionado com o poder do css3. Veja abaixo como ficará o efeito

Para este tutorial de menu precisaremos apenas de usar as animações do css3 e nada mais, sem JavaScript, sem imagens, tudo com objetos HTML e css, veja como é simples

Primeiro vamos criar nosso HTML básico para inclusão do menu:

<input type="checkbox" id="navicon">
<div class="nav-toggle">
  <label for="navicon" class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </label>
</div>
<nav class="sidebar" role="complementary"></nav>

Agora este é o css

/* para padronizar todos os navegadores */
*{
	margin:0;
	padding: 0;
	box-sizing: border-box;
	list-style-position: inside;
}

.nav-toggle {
	display: block;
	padding: 10px 10px 15px 10px;
	background: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 50;
}
.hamburger {
	width: 1.08em;
	position: relative;
	display: inline-block;
	height: 0.6em;
	font-size: 1.2em;
	background: #fff;
}
.hamburger span {
	width: 100%;
	background: #000;
	display: block;
	position: absolute;
	left: 0px;
	height: 0.185em;
	border-radius: 1.2px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-ms-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
}
.hamburger span:nth-child(1) {
	top: 0px;
}
.hamburger span:nth-child(2) {
	top: 0.36em;
}
.hamburger span:nth-child(3) {
	top: 0.73em;
}
.sidebar {
	width: 20%;
	height: 100%;
	position: fixed;
	background: #000;
	top: 0px;
	left: 0px;
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transition: 0.2s all;
	-webkit-transition: 0.2s all;
	-ms-transition: 0.2s all;
	-moz-transition: 0.2s all;
	-o-transition: 0.2s all;
}
#navicon {
	display: none;
}
#navicon:checked ~ .sidebar {
	visibility: visible;
	opacity: 1;
}
#navicon:checked ~ .nav-toggle > .hamburger span {
	top: 0.36em;
}
#navicon:checked ~ .nav-toggle > .hamburger span:nth-child(1) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
#navicon:checked ~ .nav-toggle > .hamburger span:nth-child(2) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
#navicon:checked ~ .nav-toggle > .hamburger span:nth-child(3) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

O que fazemos aqui é um truque com um checkbox e tratamos ele de forma que fique invisível, no lugar dele sobrepomos um objeto div com 3 spans dentro que tratamos com css para que vire o botão do nosso menu

Depois disso apenas aproveitando a propriedade checked do checkbox fazemos toda a mágica acontecer utilizando de CSS

Este tutorial é bem simples, a complicação é entender as animações do css3, mas achei a dica muito interessante.