Pure CSS / CSS3 Fullscreen Hamburger Menu

Preview:

Description:

This is a responsive, fullscreen navigation menu with an SVG based hamburger toggle, built using pure HTML5 / CSS3.

How to use it:

Create a hamburger toggle to toggle the fullscreen menu using SVG and checkbox / label.

<input id="toggle" type="checkbox" />
<label for="toggle">
    <svg class="burger" width="86" height="60" viewbox="0 0 150 150">
        <g stroke-width="12">   
            <line x1="6" y1="6" x2="80" y2="6"></line>
            <line x1="6" y1="28" x2="80" y2="28"></line>
            <line x1="6" y1="50" x2="80" y2="50"> </line>
        </g>
    </svg>
    <svg class="close" width="86" height="60" viewbox="0 0 150 150">
        <g stroke-width="12">   
            <line x1="42" y1="6" x2="42" y2="80"></line>
            <line x1="6" y1="42" x2="80" y2="42"></line>
        </g>
    </svg>
</label>

Create the menu as follow:

<div class="menu">
  <div>Home</div>
  <div>About</div>
  <div>Blog</div>
  <div>Contact</div>
</div>

The core CSS / CSS3 for the menu toggle and close button.

label {
  position: absolute;
  z-index: 1;
}
input {
  display: none;
}
input:checked ~ label {
  right: 0;
}
.burger {
  position: relative;
  top: 24px;
  cursor: pointer;
}
.burger g {
  stroke: #ffffff;
  -webkit-transition: stroke 0.25s ease-in-out;
  transition: stroke 0.25s ease-in-out;
}
.burger g:hover {
  stroke: #cccccc;
}
input:checked ~ label .burger {
  opacity: 0;
}
.close {
  position: relative;
  top: 24px;
  cursor: pointer;
  opacity: 0;
}
.close g:hover {
  stroke: #cccccc;
}
.close g {
  stroke: #ffffff;
  -webkit-transition: stroke 0.25s ease-in-out;
  transition: stroke 0.25s ease-in-out;
}
.close line {
  -webkit-transform-origin: 0%;
          transform-origin: 0%;
}
.close g {
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
  -webkit-transform-origin: 50%;
          transform-origin: 50%;
}
input:checked ~ label .close {
  opacity: 1;
}
input:checked ~ .menu {
  opacity: 1;
}
input:checked ~ .menu div {
  margin-top: 0px;
}

Style the menu whatever you like:

.menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  position: absolute;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  background-color: tomato;
  -webkit-transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.menu div {
  margin-top: 50px;
  -webkit-transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: margin 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}