<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;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.