<input type="checkbox" id="navInput">

<div id="main">
  <p>Click Hamburger to open drawer</p>
  <p>Click X button or darkened area to close drawer</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit ea assumenda nesciunt asperiores aperiam enim
    deserunt, similique qui esse ipsum quos, voluptatibus iusto excepturi! Eligendi ducimus sit culpa maxime magni
    aperiam inventore quidem? A libero doloremque eligendi quis obcaecati quae pariatur illo nesciunt eum totam ullam
    vitae ipsum voluptatem, vel illum necessitatibus ut sit consequuntur fuga, nisi dignissimos optio. Nisi nulla iusto
    dolorum possimus voluptatibus animi voluptates non, aliquid, officiis dolor ab deleniti recusandae! Adipisci
    nesciunt enim necessitatibus blanditiis fugit minima provident itaque accusamus sed doloribus fuga corporis ipsum
    recusandae quia, maiores, odio eius aut molestias distinctio hic, perspiciatis debitis quasi quisquam. Rem, ipsam
    delectus. Ipsam id nemo atque! Deserunt qui esse distinctio autem, minus tenetur sapiente fugit voluptatum eligendi
    nisi! Consequatur rem mollitia facilis a molestias nobis, quos perspiciatis iste excepturi quis dolore inventore
    sequi molestiae minima voluptatibus dolorem expedita aspernatur, quae repellat ea architecto placeat magnam
    voluptas. In quidem asperiores odio tempore, quam accusantium tenetur molestias modi doloremque reiciendis repellat
    ipsa iusto placeat neque magnam quis, corrupti voluptatum delectus dignissimos natus? Delectus commodi accusantium
    voluptatum nostrum. Eligendi animi blanditiis, numquam harum, earum rerum deleniti consequuntur atque ex voluptatem
    culpa neque nostrum esse reiciendis veritatis sapiente adipisci quo itaque. Odit veritatis, asperiores autem tenetur
    at natus inventore accusantium molestias! Hic maiores libero quam modi omnis, porro dolores, adipisci voluptates
    esse possimus, voluptatibus accusamus corporis quaerat in! Consequuntur hic reiciendis, esse ducimus maiores, ut
    provident accusamus doloribus nobis ea eos voluptatibus impedit iure? Corrupti dolores repellendus, quod quidem
    nesciunt temporibus pariatur, beatae eveniet minima eum tempora eligendi maiores explicabo aperiam id atque
    excepturi minus. Veritatis dolores saepe quas delectus molestiae praesentium, dolore adipisci voluptatem odio
    sapiente illum minima, corrupti eligendi omnis, sunt minus. Iure, hic debitis. Laboriosam voluptatibus quibusdam
    deleniti quis quidem quaerat consectetur at minus magnam. Earum, totam repellendus?</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
  <p>scroll</p>
</div>

<label class="openbtn" for="navInput">
  <div id="openbtn-top"></div>
  <div id="openbtn-mid"></div>
  <div id="openbtn-bot"></div>
</label>

<nav id="nav">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</nav>
html, body {
  margin: 0
}

*, *::before, *::after {
  box-sizing: border-box
}

a {
  color: #fff;
  text-decoration: none
}

a:hover {
  color: #aaa
}

/* Hide Input */
#navInput {display: none}

/* Container */
#main {
  transition: transform .5s
}

#navInput:checked ~ #main {
  transform: translateX(-200px)
}

/* Openbtn */
.openbtn {
  position: fixed;
  top: 5px;
  right: 5px;
  cursor: pointer;
  transition: .5s
}

.openbtn div {
  width: 25px;
  height: 4px;
  border-radius: 5px;
  background: #000;
  transition: .5s cubic-bezier(0.6, 0.05, 0.28, 0.91)
}

.openbtn #openbtn-mid {
  margin: 4px 0;
}

#navInput:checked ~ .openbtn {
  right: 205px
}

#navInput:checked ~ .openbtn::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .25)
}

#navInput:checked ~ .openbtn #openbtn-top {
  transform: translateY(4px) rotate(-135deg)
}

#navInput:checked ~ .openbtn #openbtn-mid {
  opacity: 0;
  transform: rotate(135deg)
}

#navInput:checked ~ .openbtn #openbtn-bot {
  transform: translateY(-12px) rotate(-45deg)
}

/* Drawer */
#nav {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  padding: 30px 10px;
  background: #282828;
  transition: .5s;
  z-index: 10
}

#navInput:checked ~ #nav {
  transform: translateX(-200px)
}

#nav a {
  display: block;
  font-size: 1.4rem;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(100, 100, 100, .5);
  transition: padding-left .5s
}

#nav a:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0
}

#nav a:hover {
  padding-left: 5px
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.