Click emulation with HTML and CSS
<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.