Skip to content

Instantly share code, notes, and snippets.

@kovtunos
Last active November 27, 2016 21:36
Show Gist options
  • Select an option

  • Save kovtunos/3af93390d16301dbf2e651e26d25b159 to your computer and use it in GitHub Desktop.

Select an option

Save kovtunos/3af93390d16301dbf2e651e26d25b159 to your computer and use it in GitHub Desktop.
Mobile menu button with animation #sass #jquery
// SCSS
$menu-bars-color: #000;
%span-menu {
backface-visibility: hidden;
background-color: $menu-bars-color;
border-radius: 2px;
height: 4px;
transition: all .3s;
width: 100%;
}
.menu-toggle {
float: right;
height: 30px;
margin: 24px 20px 10px;
width: 28px;
span {
@extend %span-menu;
display: inline-block;
position: relative;
&::after,
&::before {
@extend %span-menu;
content: '';
left: 0;
position: absolute;
top: -9px;
}
&::after {
top: 9px;
}
}
// on menu activation
&.on {
span {
background-color: transparent;
&::before {
transform: rotate(45deg) translate(5px, 5px);
}
&::after {
transform: rotate(-45deg) translate(7px, -8px);
}
}
& + #menu {
opacity: 1;
visibility: visible;
}
}
}
// JS
// Toggle menu.
$('.menu-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('on');
$('header nav').slideToggle();
});
// PUG
a(href="#menu", class="menu-toggle") #[span]
// HTML
<a href="#menu" class="menu-toggle"><span></span></a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment