✨ 🎉 ✨

By taking advantage of the CSS Adjacent sibling combinator (the plus symbol +) and a hidden checkbox, you can create some reusable CSS logic to open and close menus.

The only difference in CSS needed for the menus is the transform: translate that hides them from their visible position (and a unique ID for the checkbox).

When the check box is checked, the + combinator selects the first sibling and applies the CSS rules (in this case, reseting the translate back to zero).
You can then make menu buttons anywhere on the page by using a HTML label for the checkbox.

You can even make CSS changes to multiple elements (like a menu and a dark overlay behind it) by making the first sibling a container for them. 😀