Skip to content

Instantly share code, notes, and snippets.

@ColeTownsend
Last active August 29, 2015 13:57
Show Gist options
  • Save ColeTownsend/9729673 to your computer and use it in GitHub Desktop.
Save ColeTownsend/9729673 to your computer and use it in GitHub Desktop.
A Pen by Cole Townsend.

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.

<input class="toggle" id="sidebar" name="sidebar" type="checkbox" />
<label for="sidebar" class="hamburger"><i>Show Menu</i></label>
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment