Neat trick to toggle the display of something in the page, using only CSS. In this case, a slide out menu.

First we need the HTML:

<input id="menu-toggle" type="checkbox">
<label class="menu-trigger" for="menu-toggle"></label>
<nav id="menu">
  <ul>
    <li>
      <a href="">Menu Item</a>
    </li>
  </ul>
</nav>

Use the “:checked” pseudo-class, to check the state of the menu (open/close).
Hide the checkbox input, as it is not vissually needed, and style the label as a menu button.

#menu {
  width: 100%;
  position: fixed;
  right: -100%; /* move the menu out of the screen */
  top: 0;
  bottom: 0;
  overflow-y: auto;
  transition: all 1s cubic-bezier(0.2, 1, 0.2, 1) 0s;
  z-index: 999;
}

#menu-toggle {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

#menu-toggle:checked ~ #menu {
  right: 0; /* add the menu into the screen */
}

.menu-trigger {
  /* Closed menu style ☰ */
}

#menu-toggle:checked ~ .menu-trigger {
  /* Opened menu style × */
}