Even its original perpetrator agrees.

I don't like my browser running code provided by strangers (who are very unlikely to have my best interests at heart).

On the other hand, having a site that works reasonably well with dinky screens is nice.

Combine those two sentiments with my love of tinkering, and it won't come as a big surprise that I eventually did find a way to have both responsive layout with a popup navigation menu, but without any JS (or server-side magic).

On a tiny screen my site now shows up like this:

And if you click on the triple flatline button you get the navigation popup:

And unsurprisingly all of the clickable entries do just what it says on the packaging.

How does it work?

The general CSS and size-specific niceties come from purecss, a set of very small CSS modules that I discovered recently - and quite like.

The nav magic is not magic either, and it's not even not my magic: I simply reused an idea that I found in an example by Joe Snell. The setup centers around the :target CSS 3 selector, which fires for an element with a given ID, if your current URL has a fragment identifier that matches this ID.

So, on my site the flatliner button is just a plain link to #mininav. The block with id="mininav" is normally not shown (via display: none), and with the selector #mininav:target I establish that it should show up when toggled, and what I want it to look like.

The close me entry simply links to a non-existent anchor, which makes the mininav block vanish and thus completes the setup.

The CSS to do that is absolutely trivial. The HTML side of things is so, too, just UTSL.