El mejor menú de diseño adaptable 100% HTML y CSS

Gana el premio a la solución más ingeniosa para crear un menu adaptable. Utilizando un elemento HTML que con un click cambia a un estado seleccionable con CSS: Un checkbox. Felicitaciones a la gente de Focus on Function. De las distintas o no tan distintas soluciones, la más bonita es esta.

El selector CSS estrella utilizado es ~ que permite seleccionar los elementos hermanos a otro.

HTML

<input type="checkbox" id="main-nav-check"/>
<div id="menu"> 	
	<label for="main-nav-check" class="toggle" onclick="" title="Close">&times;</label>
	<ul>

CSS

#main-nav-check:checked ~ .container,
#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"] { 
  -webkit-transform:translate(13.75em,0); 
  -ms-transform:translate(13.75em,0);
  transform:translate(13.75em,0);
}