Skip to content

Instantly share code, notes, and snippets.

@joseluisq

joseluisq/menu-toggle.html

Last active May 5, 2021 12:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joseluisq/a6ef185322e9efa16dd9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joseluisq/a6ef185322e9efa16dd9 to your computer and use it in GitHub Desktop.
Download ZIP
SASS Menu Toggle for Mobile Screen
Raw
menu-toggle.html
<a href="#" id="menu-toggle">
<span></span>
</a>
Raw
menu-toggle.js
var $menu = $('#menu');
$('#menu-toggle').click(function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
$menu.removeClass('active');
$(this).removeClass('active');
} else {
$menu.addClass('active');
$(this).addClass('active');
}
});
Raw
menu-toggle.scss
// Menu Toggle
#menu-toggle {
position: fixed;
display: block;
top: 0;
left: 0;
background: #000;
background: rgba(0, 0, 0, .7);
font-size: 11px;
z-index: 10;
width: 4em;
height: 4em;
padding: 1em;
span,
span:before,
span:after {
background-color: #fff;
width: 100%;
height: .2em;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;
}
span {
display: block;
margin-top: .9em;
position: relative;
}
span:before,
span:after {
content: ' ';
left: 0;
position: absolute;
top: -.55em;
}
span:after {
top: .55em;
}
// Active state
&.active {
span {
background: rgba(0, 0, 0, 0);
}
span:before {
-webkit-transform: rotate(45deg) translate(.5em, .4em);
-moz-transform: rotate(45deg) translate(.5em, .4em);
-ms-transform: rotate(45deg) translate(.5em, .4em);
-o-transform: rotate(45deg) translate(.5em, .4em);
transform: rotate(45deg) translate(.5em, .4em);
}
span:after {
-webkit-transform: rotate(-45deg) translate(.4em, -.3em);
-moz-transform: rotate(-45deg) translate(.4em, -.3em);
-ms-transform: rotate(-45deg) translate(.4em, -.3em);
-o-transform: rotate(-45deg) translate(.4em, -.3em);
transform: rotate(-45deg) translate(.4em, -.3em);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment