interactive hamburger menu icon

index.html

<div class="interactive-menu-button">
  <a href="#">
    <span>Menu</span>
  </a>
</div>

interactive-hamburger-menu-icon.markdown

interactive hamburger menu icon

hamburger menu icon which transforms into X if it's active. Good to toggle menu.

A Pen by Leo Gono on CodePen.

License.

script.js

$('.interactive-menu-button a').click(function() {
  $(this).toggleClass('active');
});

style.less

.interactive-menu-button {
  position: relative;
  background: #f1c40f;
  padding: 10px;
  height: 40px;
  a {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    span {
      height: 2px;
      position: absolute;
      background: #000;
      text-indent: -999em;
      width: 100%;
      top: 6px;
      &:before, &:after {
        content: '';
        height: 2px;
        background: #000;
        width: 100%;
        position: absolute;
        top: -6px;
        left: 0;
        transition: all 0.5s cubic-bezier(0, 0.275, 0.125, 1);
      }
      &:after {
         top: 6px;
      }
    }
   &.active span {
      background: transparent;
      &:before {
        transform: translateY(6px) translateX(1px) rotate(45deg);
      }
      &:after {
        transform: translateY(-6px) translateX(1px) rotate(-45deg);
      }
    }
  }
}