I made a responsive CSS-only hamburger menu, designed to be "compatible" with PicoCSS. This means that the usual nav menu is simply a row-based flexbox, per PicoCSS documentation. My menu works, as the codepen link demonstrates, but it isn't animated. I attempted an animation, hoping the menu would "grow" vertically, but the animation isn't working at all.
I suspect this is because, to keep the menu simple, I used a media-query to convert the full-screen, row-based menu options into a mobile "column-based, wrapped, max-width: 100%, max-height:fit-content" flex. That sudden change was probably too much for the animation to sort out.
Regardless, any ideas of how to make this "grow vertically" animation happen? I definitely want to do this CSS-only (no JavaScript) if at all possible.
If I need a more fundamental "shift" in how I approach this, that's ok, but I still want to remain as close as possible to the original simplicity that PicoCSS was promoting.
Actually, I'd also like to know how to make the links of the "fly-out" menu be selectable anywhere within their boundaries. As is, I can only select them if I click on the text itself.
max-height:fit-content; is not "transitionable". You need a fixed value.
I'd use something like max-height:100vh;
For more info see: https://css-tricks.com/using-css-transitions-auto-dimensions/