Hamburger Cross

index.html

<section>
  <nav>  
    <a class="navicon-button x">
      <div class="navicon"></div>
    </a>
  </nav>
</section>

script.js

$(".navicon-button").click(function(){
  $(this).toggleClass("closed");
});

style.less

@hamburgerWidth: 5em;
@hamburgerHeight: 0.125 * @hamburgerWidth;
@hamburgerMargin: (@hamburgerWidth / sqrt(2) - 3*@hamburgerHeight)/2;
@translateX: 0.19047619*@hamburgerWidth;
@translateY: 0.285714286*@hamburgerWidth;
@transition: 0.3s;
 
.line {
  width: @hamburgerWidth;
  height: @hamburgerHeight;
  border-radius: 1.5em;
  background-color: #c6c6c6;
  position: relative;
}
 
.navicon-button {
  
  display: inline-block;
  padding: 1em;
  cursor: pointer;
  -webkit-transition: all @transition;
  
  &:before, &:after {
    content: '';
     display: block;
    .line;
    -webkit-transition: all @transition;
    -webkit-backface-visibility: hidden; 
  }
  &:before {margin-bottom: @hamburgerMargin;}
  &:after {margin-top: @hamburgerMargin;}
  
  &.closed{
    
    .navicon{
     opacity: 0;
     -webkit-transition: all @transition;
    }
    
    &:after{
      -webkit-transform: translate(-1*@translateX, -1*@translateY) rotate(-45deg);
      -webkit-transition: all @transition;
    }
  
    &:before{
      -webkit-transform: translate(-1*@translateX, @translateY) rotate(45deg);
      -webkit-transition: all @transition;
 
    }
  }
}
 
.navicon {
  .line;
}
 
 
* { box-sizing: border-box; }
html{ background-color: #333; font-size: 14px; }
section { background-color: #000; }

http://codepen.io/anon/pen/ihmBa