CSS Drawer menu — the most lightweight one ever!?

Drag the window to see a demo!

Say whaaat?

How does it work?

Through the hackish magic of the input:checked pseudo-selector and combined adjacent sibling (x + y) selector!

See the source code for details. It's pretty much plug and play. Add your own styles, or feel free to take the css from this example.

Note: because of the adjacent selector hack, you must keep the order of each html element intact when using it. That means the order should be: input:checkbox, menu, label

Optional classes