What's this?

This slide-in menu (see the hamburger icon, top right) is inspired by Hannah McMahon's work on hannahrosecodes.com, which I liked a lot. I'd rather not depend on JavaScript for it, though, so I thought I'd have a look at doing it in pure CSS.

How it works

Basically it uses the fairly standard trick that a checkbox's checked state is exposed to CSS. So, we style the menu (a <ul> element) as being full-screen, then transform it off-screen, and then when the checkbox is checked, the CSS selector input:checked ul will match the menu and so we unset its transform to bring it back on-screen. (We use transform here because it animates smoothly, and we can ease it with transition, which is important for animations.)

What checkbox?

Ah, the checkbox is display:none, and the menu icon (an SVG) is contained within a <label> for the checkbox, so clicking the icon checks and unchecks the checkbox.

How does the icon itself animate?

It's the world's simplest SVG, just three <rect>s, and we rotate them and scale them individually with another transform.