CSS Only Togglable Fullscreen Side Navigation

Preview:

Description:

A sidebar navigation that allows to show and hide a fullscreen menu using pure CSS/CSS3.

How to use it:

Create the fullscreen navigation menu:

<aside class="sidebar">
  <ul class="menu">
    <li class="menu__item"><a class="menu__link" href="#">Home</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Category</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Blog</a></li>
    <li class="menu__item"><a class="menu__link" href="#">About</a></li>
    <li class="menu__item"><a class="menu__link" href="#">Contact</a></li>
  </ul>
</aside>

Create a hamburger menu toggle button using checkbox and label elements:

<input type="checkbox" id="menuToggler" class="input-toggler"/>
<label for="menuToggler" class="menu-toggler">
  <span class="menu-toggler__line"></span>
  <span class="menu-toggler__line"></span>
  <span class="menu-toggler__line"></span>
</label>

The main CSS to style the navigation menu.

.sidebar {
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.sidebar {
  width: var(--sidebar-width);
  -webkit-transform: translateX(calc(var(--sidebar-width) * -1));
  transform: translateX(calc(var(--sidebar-width) * -1));
  background: -webkit-linear-gradient(top left, Tomato, Wheat);
  background: linear-gradient(to bottom right, Tomato, Wheat);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  height: 100vh;
  opacity: .5;
}
.content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.menu { list-style-type: none; }
.menu__link {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 10vmin;
  line-height: 15vmin;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.menu__link:hover, .menu__link:focus, .menu__link:active { color: Gold; }

Style & animate the hamburger menu toggler.

.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: relative;
  position: fixed;
  top: 10px;
  left: 10px;
  cursor: pointer;
  z-index: 1;
}
.menu-toggler__line {
  height: calc(var(--toggler-size) / 5);
  background: Tomato;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.menu-toggler__line:nth-child(2) {  top: calc(var(--toggler-size) / 5 * 2);
}
.menu-toggler__line:nth-child(3) {  top: calc(var(--toggler-size) / 5 * 4);
}
.input-toggler {
  position: absolute;
  left: -100%;
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line { background: Wheat; }
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(1) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(2) { opacity: 0; }
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(3) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}
.input-toggler:checked ~ .sidebar {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: .98;
}