Kiougar · April 10, 2016 17:01
diff --git a/menu-trigger-animation.scss b/menu-trigger-animation.scss
 /* 
  Author:
  Georgios Tzourmpakis <[email protected]>
  
  Usage:
  <div class="menu-trigger"><a class="menu-button [left-cross]"><span></span></a></div>
  
  Demo: http://codepen.io/Kiougar/pen/QNQNNj
 */

 $size: 64px;
 $color: white;
 $width: 100%;
 $height: 10%;
 $ratio: 80%;
 $offset: ($width/$height - 1) / 2 * $ratio;

 .menu-trigger {
  position: relative;
  width: $size;
  height: $size;
  cursor: pointer;
  
  &.active {
    .menu-button {
      > span {
        background-color: transparent;
      }
      > span:before, > span:after {
        top: 0;
      }
      > span:before {
        transform: rotate(45deg);
      }
      > span:after {
        transform: rotate(-45deg);
      }
      
      &.left-cross {
        > span:before {
          transform: rotate(-45deg);
        }
        > span:after {
          transform: rotate(45deg);
        }
      }
    }
  }
 }

 .menu-button {
  > span, > span:after, > span:before {
    content: '';
    display: block;
    position: absolute;
    background: $color;
    border-radius: 1px;
    transition: all 0.5s ease-in-out;
  }
  > span {
    width: $width;
    height: $height;
    left: (100% - $width) / 2;
    top: (100% - $height) / 2;
    
    &:before, &:after {
      width: 100%;
      height: 100%;
      left: 0;
    }
    
    &:before {
      top: -$offset;
    }
    
    &:after {
      top: $offset;
    }
  }
 }
No results found