I’m not sure what made me think of this, but I got a wild hair and thought I’d try it out.

The :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 could.

Over at codepen I left a pen showing just that:

Some of the interesting bits:

  • The body is set to display: flex and flex-direction: row, which would normally put the 3 major body parts, input, aside, and article horizontally, but…

  • The input checkbox is positioned absolute taking it out of the flex flow, so only the aside and article are flexed

  • 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.

normal state

.sidebar {
  width: 20px;
  background: tomato;
  padding-top: 40px;
  > * {
    display: none;
  }
}

checked state

input.sidebar-toggle:checked ~ .sidebar {
    width: 200px;
  > * {
    display: inherit;
  }
}

Of course, this could be taken in all sorts of directions, but I wanted to try this out to see if it works.


Source