Modern CSS-only Burger Fold-Out Menu

A modernized version based on Erik Terwan's popular pure CSS Hamburger fold-out menu: https://codepen.io/erikterwan/pen/EVzeRP Author: Michael Schnerring (https://schnerring.net) License: MIT Read more about how it works: https://schnerring.net/posts/create-a-modern-css-only-fold-out-burger-menu/

HTML

<div class="example">
  <div class="menu-burger">
    <input type="checkbox" />
    <!-- `menu-2` icon of Tabler Icon Suite (https://tablericons.com/) licensed under MIT -->
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
      <line x1="4" y1="6" x2="20" y2="6" />
      <line x1="4" y1="12" x2="20" y2="12" />
      <line x1="4" y1="18" x2="20" y2="18" />
    </svg>
    <ul class="menu-burger__item-list">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

CSS

/*
  A modernized version based on Erik Terwan's popular pure CSS Hamburger fold-out menu:

  https://codepen.io/erikterwan/pen/EVzeRP

  Author: Michael Schnerring (https://schnerring.net)
  License: MIT
  
  Read more about how it works: https://schnerring.net/posts/create-a-modern-css-only-fold-out-burger-menu/
*/

body {
  margin: 0;
  padding: 0;
}

/* Wrapper */
.example {
  background: #3c3836;
  color: #ebdbb2;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

/* Position direct descendants of menu-burger absolutely */
.menu-burger > * {
  position: absolute;
}

/* Invisible click handler indicating whether menu is collapsed */
.menu-burger input {
  height: 32px;
  margin: 0;
  opacity: 0;
  width: 32px;
  z-index: 3;
}

/* Burger */
.menu-burger svg {
  height: 32px;
  width: 32px;
  z-index: 2;
}

/* Menu items */
ul.menu-burger__item-list
{
  background: #ebdbb2;
  bottom: 0;
  color: #3c3836;
  list-style: none;
  margin: 0;
  padding: 32px;
  top: 0;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.9, 0, 0.1, 1);
  width: 200px;
  z-index: 1;
}

/* Menu fold-out */
input:checked ~ .menu-burger__item-list {
  transform: none;
}

/* Change line color on fold-out */
.menu-burger input:checked ~ svg line {
  stroke: #3c3836;
}

/* Set transform origins to center of respective line */
.menu-burger svg line:nth-of-type(1)
{
  transform-origin: center 6px;
}

.menu-burger svg line:nth-of-type(2)
{
  transform-origin: center 12px;
}

.menu-burger svg line:nth-of-type(3)
{
  transform-origin: center 18px;
}

/* Line animations */
.menu-burger svg line {
  transition-duration: 0.5s;
  transition-property:
    stroke,
    opacity,
    transform;
  transition-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
}

/* Fade out middle line on fold-out */
.menu-burger input:checked ~ svg line:nth-of-type(2) {
  opacity: 0;
  transform: scale(0.2);
}

/* Center top and bottom lines vertically, then rotate by 45...