I’m not sure what made me think of this, but I got a wild hair and thought I’d try it out.
:checked CSS pseudo-selector lets you select a checked
checkbox or radio button. The question I wondered, would this be a
cheap-azz way of making a sliding sidebar? And the answer is, yes it
Over at codepen I left a pen showing just that:
Some of the interesting bits:
The body is set to
flex-direction: row, which would normally put the 3 major body parts,
The input checkbox is positioned absolute taking it out of the flex flow, so only the
After setting everything up for the “normal” state, with the checkbox unchecked, and the sidebar hidden, I added the last CSS rule to display the sidebar when the input checkbox is checked.
Of course, this could be taken in all sorts of directions, but I wanted to try this out to see if it works.