Click emulation with HTML and CSS

опубликовано

Тэги: html

<input id="test" type="checkbox">
<div class="menu">
    <label for="test">hide</label>
</div>
<div class="body">
    <label for="test">show</label>
</div>
body {
  margin: 0;
  padding: 0;
}

.body label {
  position: absolute;
  left: 0.6vw;
  top: 0.4vw;
}

label {
  font-weight: bold;
}

.menu {
  background-color: #0b97c4;
  height: 100vh;
  left: -25vw;
  position: fixed;
  width: 25vw;
  transition: left 0.25s;
  z-index: 1;
}

.menu label {
  position: absolute;
  right: 0.6vw;
  top: 0.4vw;
}

#test {
  display: none;
}

#test:checked + div.menu {
  left: 0;
  transition: left 0.25s;
}

See the Pen click emulation with checkbox by Vovka Morkovkin (@soyayaos) on CodePen.