A Pen by Cole Townsend.

Facebook-Paper-Hamburger-Menu.markdown

Facebook Paper Hamburger Menu

Title of this pen also found under “things you’d never have heard 10 years ago.”

A Pen forked by Cole Townsend on CodePen.

License.

index.html

<input class="toggle" id="sidebar" name="sidebar" type="checkbox" />
<label for="sidebar" class="hamburger"><i>Show Menu</i></label>

style.css

html, body {
  height: 100%;
}

.toggle {
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

.hamburger {
  top: 50%;
  left: 50%;
  margin: -8px -16px;
  display: block;
  width: 32px;
  height: 16px;
  position: relative;
  transition: .2s;
  transition-delay: .15s;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.hamburger i {
  display: block;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  height: 1px;
  background-color: black;
  width: 100%;
  position: absolute;
  top: 50%;
  transition: .3s;
  transition-delay: .2s;
}

.hamburger:after, .hamburger:before {
  content: '';
  position: absolute;
  top: 0;
  height: 0;
  border-bottom: 1px solid black;
  width: 100%;
  left: 0;
  right: 0;
  transition: .5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transform-origin: left top;
}

.hamburger:after {
  top: 100%;
  transform-origin: left bottom;
}

.toggle:checked + .hamburger {
  transform: translate3d(16px,0,0);
  transition-delay: .2s;
}

.toggle:checked + .hamburger i {
  opacity: 0;
  transition-delay: 0;
}

.toggle:checked + .hamburger:after {
  transform: rotate3d(0,0,1,-135deg) 
             translate3d(-8px,4px,0);
}

.toggle:checked + .hamburger:before {
  transform: rotate3d(0,0,1,135deg) 
             translate3d(-8px,-4px,0);
}