Skip to content

Instantly share code, notes, and snippets.

@MatthieuScarset
Last active May 17, 2017 13:21
Show Gist options
  • Save MatthieuScarset/30530b25f4e4c7350edd991cbb7dc41c to your computer and use it in GitHub Desktop.
Save MatthieuScarset/30530b25f4e4c7350edd991cbb7dc41c to your computer and use it in GitHub Desktop.
My SCSS hamburger menu with transition.
// Hamburger menu SCSS
/*
<a href="#" class="main-menu-btn js-main-menu-toggle">
<span class="wrapper">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</span>
</a>
*/
.main-menu-btn {
display: block;
width: 32px;
padding: 10px 0;
@include breakpoint(600px) {
display: none;
}
.wrapper {
display: block;
position: relative;
width: 32px;
height: 25px;
}
.bar {
display: block;
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 5px;
transition: transform .1s ease-in-out 0s, top .1s ease-in-out .1s;
// background-color: $navy;
background-color: #FFF;
transform-origin: 50% 50% 0;
&.middle {
top: 10px;
}
&.bottom {
top: 20px;
}
}
&.is-active {
.bar {
top: 10px;
width: 32px;
&.top {
transform: rotate(45deg);
}
&.middle {
opacity: 0;
}
&.bottom {
transform: rotate(-45deg);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment