Skip to content

Instantly share code, notes, and snippets.

@elijahmanor
Last active February 21, 2018 02:35
Show Gist options
  • Save elijahmanor/9331915 to your computer and use it in GitHub Desktop.
Save elijahmanor/9331915 to your computer and use it in GitHub Desktop.
A Pen by Elijah Manor.
<a id="nav-toggle" href="#"><span></span></a>
$( "#nav-toggle" ).on( "click", function() {
$( this ).toggleClass( "active" );
});
document.querySelector( "#nav-toggle" ).addEventListener( "click", function() {
this.classList.toggle( "active" );
});
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
#nav-toggle span {
&, &:before, &:after {
// ... other styles ...
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
// ... other styles ...
&.active {
background-color: transparent;
&:before, &:after {
top: 0;
}
&:before {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&:after {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}
@Kudrah-Kaseruuzi
Copy link

I have managed to created the icon but it wont into an X. I think the problem is with liking Javascript. Does anyone know how to link the javascript to html with this particular script? But i have noticed that if i replaced the dot before active with a colon, the button does animate well but only with the ouse button pressed on it continuously, or otherwise the trasformation wouldnt tae place with onnly one click. I am using firefox browser.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment