A Pen by Elijah Manor.

CSS-Animated-Hamburger-Icon.markdown

CSS Animated Hamburger Icon

CSS Animated Hamburger Icon with Transforms

A Pen by Elijah Manor on CodePen.

License.

index.html

<a id="nav-toggle" href="#"><span></span></a>

jquery.js

$( "#nav-toggle" ).on( "click", function() {
  $( this ).toggleClass( "active" );
});

script.js

document.querySelector( "#nav-toggle" ).addEventListener( "click", function() {
  this.classList.toggle( "active" );
});

style.css

#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);
}

style.scss

#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);
    }
  }
}

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.