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:

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