Pure CSS, checkbox-based side menu

Press the SPACE key, or click/tap the above button to open the menu

If you are looking for a way to create an HTML side menu that the user can toggle via a button, or a keystroke, you might be interested in the following example.

The technique

The hereby demonstrated interaction example relies on the existence of a regular HTML checkbox input, hidden via CSS, that has two labels attached on the page.

The first label is the upper-right button, and the second is the dark overlay that covers the content while the menu is opened. By using a label to create the overlay, we ensure that the user can close the menu by clicking/tapping outside of it, which is a behavior that the user might expect.

All the animation stuff is created via CSS transitions, conditionned by the checked state of the checkbox, bypassing the need for Javascript to update the interface. For the sake of performance, the only CSS properties affected by the transitions are opacity and transform, which should be a good thing, because they usually don't require a reflow or repaint of the DOM.

.

So smooth, wow.