<body>
	<label for="trigger">
		Trigger Menu
	</label>
	<input type="checkbox" id="trigger">
	<nav>
		<ul>
			<li>Lorem</li>
			<li>Ipsum</li>
			<li>Dolor</li>
			<li>Sit</li>
		</ul>
	</nav>
</body>
body {
	font-family: sans-serif;
	background-color: #222228;
	color: #ccc;
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100wv;
	height: 100vh;
}

nav {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background-color: #444449;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	
	input:checked + & {
		transform: translateX(0);
	}
}

input {
	display: none;
}

label {
	background: #eee;
	color: #222228;
	padding: 1em;
	margin-left: 2em;
	cursor: pointer;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.