Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
}
}
@crobison

This comment has been minimized.

Copy link

crobison commented May 26, 2015

Saw this on ESPN's new site. Thank you for making it easy for me!

@crobison

This comment has been minimized.

Copy link

crobison commented May 26, 2015

and +10 points for including scss!

@bhuvidya

This comment has been minimized.

Copy link

bhuvidya commented Oct 13, 2015

thx so much works great - and +1 for +10 for the scss :)

@DennysDionigi

This comment has been minimized.

Copy link

DennysDionigi commented Feb 9, 2016

+10 plus!

@Kud017

This comment has been minimized.

Copy link

Kud017 commented Feb 12, 2017

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
You can’t perform that action at this time.