HTML And CSS Only Off-canvas Drawer Navigation

Preview:

Description:

Just another responsive off-canvas drawer navigation built on top of CSS, CSS3 and checkbox element.

How to use it:

Create the off-canvas drawer navigation as these:

<aside class="DrawerMenu">
  
  <div class="MenuContainer">
    <nav class="Menu">
      <a href="#">Menu Item 01</a>
      <a href="#">Menu Item 02</a>
      <a href="#">Menu Item 03</a>
      <a href="#">Menu Item 04</a>
      <a href="#">Menu Item 05</a>
      <a href="#">Menu Item 06</a>
      <a href="#">Menu Item 07</a>
      <a href="#">Menu Item 08</a>
      <a href="#">Menu Item 09</a>
      <a href="#">Menu Item 10</a>
      <a href="#">Menu Item 11</a>
      <a href="#">Menu Item 12</a>
      <a href="#">Menu Item 13</a>
      <a href="#">Menu Item 14</a>
      <a href="#">Menu Item 15</a>
    </nav>
  </div>
  
  <label for="DrawerMenuTrigger" class="MenuOverlay"></label>
  
</aside>

Create a trigger element to toggle the drawer navigation.

<label for="DrawerMenuTrigger" class="OpenMenuButton">OPEN MENU</label>
<input type="checkbox" id="DrawerMenuTrigger" hidden>

The CSS to enable the checkbox based trigger element to open the drawer navigation.

.OpenMenuButton { cursor: pointer; }
.DrawerMenu {
  position: fixed;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  display: -ms-grid;
  display: grid;
  grid-template-areas: 'MENU OVERLAY';
  -ms-grid-columns: 15fr 5fr;
  grid-template-columns: 15fr 5fr
}
@media (min-width: 30em) {
.DrawerMenu {
  -ms-grid-columns: 5fr 10fr;
  grid-template-columns: 5fr 10fr;
}
}
#DrawerMenuTrigger:checked ~ .DrawerMenu {
  -webkit-transform: none;
  transform: none;
}
.MenuContainer {
  grid-area: 'MENU';
  background-color: rgb(102, 51, 153);
  box-sizing: border-box;
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.Menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap
}
.Menu a {
  text-decoration: none;
  color: #FFFFFF;
  display: block;
  padding: 16px 0;
}
.Menu a + a { border-top: 1px solid rgba(255, 255, 255, .1); }
.MenuOverlay { grid-area: 'OVERLAY'; }