mobile menu without javascript

On this page (upper right corner) and on the mobile version of my main website I have a little mobile/pop-out menu that doesn't use any JavaScript instead opting for a clever use of CSS to get it to do what I want.

Below is the code which is slightly different than the version on this page, but I tried to keep it as simple as possible. So positioning and sizing things may need to be reworked if you decide to use this for your own website.

The whole idea here is using a checkbox, div, a couple images, and some transformations. Set the checkbox and div to the same dimensions, make the checkbox transparent, set a background to the div behind it, and use the sibling select (~) to control things. I've left semi-detailed comments with each piece of CSS.

HTML

				   
<input id="navcheck" class="checkbox" type="checkbox" />
<div id="navbutton"></div>
<nav class="mobile">
	<-- put your links here and style them however -->
</nav>

CSS

				   
/* Position the menu and us transform to hide it off screen. The last piece controls the "animation". In my example I added a background color to make it more obvious */
nav.mobile {
	position: absolute;
	top: 35px;
	left: 0;
	height: 100vh;
	width: 100vw;
	text-align: center;
	background-color: #666;
	transform: translateX(-150%);
	transition: transform 0.25s ease-in-out;
}

/* Set both the checkbox and div to the same dimensions (in my example I use 15px as that is the dimensions of the icons being used) and position them at the top. In this example I added 10px of margin to get it out of the corner a bit */
#navcheck, #navbutton {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	height: 15px;
	width: 15px;
	margin: 10px;
}

/* Set the div background to an open icon. In my example I used a hamburger icon */
#navbutton {
	background-image: url("open.png");
	background-position: center;
	background-repeat: no-repeat;
}

/* Ensure the checkbox is always above the div and is transparent */
#navcheck {
	z-index: 1;
	opacity: 0;
}

/* When the box is checked (open), display the menu */
input#navcheck:checked ~ .mobile {
	transform: translate(0);
}

/* When the box is checked (open), change the div background to a close icon. In my example I used an 'X' */
input#navcheck:checked ~ #navbutton {
	background-image: url("close.png");
}