Burger is a hamburger menu that opens into a fullscreen navigation. One stylesheet, one small ES module, no framework and nothing at runtime. Press the button in the corner, or tab to it and hit Enter, to see the whole of it.
The unusual part is how little JavaScript there is. The entire open and
closed state is the aria-expanded attribute on the toggle,
and the stylesheet derives everything else from it with
:has(): the accent wash, the scroll lock, the three bars
folding into a cross, the links sliding in. There is nothing to keep in
sync, because the state is written in exactly one place, and that place
is the attribute a screen reader was going to read anyway.
The script is there for the one thing CSS cannot do, which is take the rest of the page out of the tab order while the menu covers it. Open the menu and press Tab a few times: focus stays inside. Without that, an overlay hides the page visually while every link behind it stays focusable, so a keyboard user tabs off into content they cannot see. Escape closes the menu and puts focus back on the button, and clicking a link closes it too, so you never arrive at the destination with the overlay still up.
Restyling is done by redeclaring --burger-* custom
properties rather than by out-specifying selectors, and the tokens that
derive from each other recompute together: override
--burger-size and the nav offset follows it. Install with
npm i the-burger, or take the stylesheet from a CDN. The
source is on GitHub.
