SASS Menu Toggle for Mobile Screen By joseluisq

CSS_menu_toogle.css

/*
 * Menu Toggle
 * By Jose Luis Quintana -> https://gist.github.com/joseluisq/a6ef185322e9efa16dd9
*/
#menu-toggle {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  background: #000;
  background: rgba(0, 0, 0, .7);
  font-size: 11px;
  z-index: 10;
  width: 4em;
  height: 4em;
  padding: 1em;
 
  span,
  span:before,
  span:after {
    background-color: #fff;
    width: 100%;
    height: .2em;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
  }
 
  span {
    display: block;
    margin-top: .9em;
    position: relative;
  }
 
  span:before,
  span:after {
    content: ' ';
    left: 0;
    position: absolute;
    top: -.55em;
  }
 
  span:after {
    top: .55em;
  }
 
  /* Active state */
  &.active {
    span {
      background: rgba(0, 0, 0, 0);
    }
 
    span:before {
      -webkit-transform: rotate(45deg) translate(.5em, .4em);
      -moz-transform: rotate(45deg) translate(.5em, .4em);
      -ms-transform: rotate(45deg) translate(.5em, .4em);
      -o-transform: rotate(45deg) translate(.5em, .4em);
      transform: rotate(45deg) translate(.5em, .4em);
    }
 
    span:after {
      -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
      -moz-transform: rotate(-45deg) translate(.4em, -.3em);
      -ms-transform: rotate(-45deg) translate(.4em, -.3em);
      -o-transform: rotate(-45deg) translate(.4em, -.3em);
      transform: rotate(-45deg) translate(.4em, -.3em);
    }
  }
}

/*
 * Mode use:
 
 <div id="menu-toggle">
    <span></span>
 </div>
  
 *
 */