Skip to content

Instantly share code, notes, and snippets.

@Dark-Arcana

Dark-Arcana/hamburger-arrow-transition.txt

Created July 17, 2018 23:38
Show Gist options
  • Save Dark-Arcana/11cc4c3026b60a39097c094e3e0e8805 to your computer and use it in GitHub Desktop.
Save Dark-Arcana/11cc4c3026b60a39097c094e3e0e8805 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hamburger-arrow-transition.txt
HTML:
<div class="menuToggle">
<span></span>
<span></span>
<span></span>
</div>
SCSS:
@mixin menuToggle($width: 3rem, $height: .4rem, $gutter: .5rem) {
span {
display: block;
height: $height;
position: absolute;
width: $width;
transition: margin .2s ease-in-out, width .2s ease-in-out, transform .2s ease-in-out;
&:nth-child(2) {
margin-top: $height + $gutter;
}
&:nth-child(3) {
margin-top: ($height + $gutter) * 2;
}
}
&.active span {
&:nth-child(odd) {
margin-right: $width / 2;
width: $width / 2;
}
&:nth-child(1) {
margin-top: $gutter;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
&:nth-child(3) {
margin-top: ($height * 2) + $gutter;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
}
}
.menuToggle {
cursor: pointer;
height: 40px;
width: 50px;
@include menuToggle(3rem, .4rem);
span {
background-color: #777;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
&.active span {
background-color: black;
}
position: fixed;
left: 25px;
top: 25px;
}
JavaScript:
$(document).ready(function(){
$('.menuToggle').on('click', function() {
$(this).toggleClass('active');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment