Checkbox
Hack
Un <input type="checkbox"> oculto actúa como interruptor de estado. El label es el botón hamburger. El selector :checked ~ nav abre el menú. Cero JavaScript.
01
El truco del selector hermano ~
El checkbox está fuera del nav.
#nav-state:checked ~ .nav-root .nav-mobile usa el combinador hermano general para mostrar el menú solo cuando el checkbox está marcado. El label apunta al checkbox con for="nav-state".02
Animación hamburger → X
Las 3 líneas del hamburger se animan con
transform: rotate() y translateY() cuando el checkbox está :checked. La segunda línea desaparece con opacity: 0.
/* El checkbox oculto, fuera del nav */
<input type="checkbox" id="nav-state">
/* El trigger: un label apuntando al checkbox */
<label for="nav-state">hamburger</label>
/* CSS — el selector hermano ~ hace todo el trabajo */
#nav-state:checked ~ .nav-root .nav-mobile {
max-height: 400px; /* abierto */
}
/* Hamburger → X */
#nav-state:checked ~ .nav-root .burger span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
<input type="checkbox" id="nav-state">
/* El trigger: un label apuntando al checkbox */
<label for="nav-state">hamburger</label>
/* CSS — el selector hermano ~ hace todo el trabajo */
#nav-state:checked ~ .nav-root .nav-mobile {
max-height: 400px; /* abierto */
}
/* Hamburger → X */
#nav-state:checked ~ .nav-root .burger span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}