HamburgerMenu.css

/* USING CSS BACKGROUNDS */

<span id="x"></span>


span {
  display: block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 0px;
  margin: 15% auto;
  -webkit-transition: all .3s ease, -webkit-transform .2s ease;
          transition: all .3s ease, transform .2s ease;
  background: -webkit-linear-gradient(top, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 23%, transparent 23%, transparent 48%, #2E313C 48%, #2E313C 50%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 78%, transparent 78%), -webkit-linear-gradient(transparent, transparent);
  background: linear-gradient(to bottom, transparent 0%, transparent 20%, #2E313C 20%, #2E313C 23%, transparent 23%, transparent 48%, #2E313C 48%, #2E313C 50%, transparent 47%, transparent 76%, #2E313C 76%, #2E313C 78%, transparent 78%), linear-gradient(transparent, transparent);
}
span:active, span:hover {
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
}
span.clicked {
  background: -webkit-linear-gradient(135deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
  background: linear-gradient(-45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 48%, #2E313C 49%, #2E313C 51%, transparent 51%, transparent 100%);
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
span.clicked:active, span.clicked:hover {
  -webkit-transform: scale(0.9) rotate(180deg);
      -ms-transform: scale(0.9) rotate(180deg);
          transform: scale(0.9) rotate(180deg);
}


document.getElementById('x').addEventListener('click', function () {
    if (this.classList.contains('clicked')) {
      this.classList.remove('clicked');
    } else {
      this.classList.add('clicked');
    }
  });
  

  
  /* USING SVG */
  
  <svg width="100" height="100">
   <g id="cross_svg">
    <rect id="Rectangle-1"  x="0" y="0" width="48" height="2" fill="transparent"></rect>
    <rect id="Rectangle-2"  x="0" y="14" width="48" height="2" fill="transparent"></rect>
    <rect id="Rectangle-4"  x="0" y="28" width="48" height="2" fill="transparent"></rect>
  </g>    
</svg> 


svg {
  width: 52px;
  height: 52px;
  z-index: 99999;
  transition: all .3s ease;
  display: block;
  margin: 15% auto;
  cursor: pointer;
}
svg g {
  transition: all .3s ease;
  width: 100px;
  height: 100px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: auto;
  cursor: pointer;
}
svg rect {
  transition: all .3s ease;
  fill: #E04681;
}
svg g {
  width: 100px;
  height: 100px;
}


$(document).ready(function(){

  var svg = $('svg');
  var lines = svg.find('rect');
  var line_first = $('svg rect:nth-child(1)')
  var line_second = $('svg rect:nth-child(2)')
  var line_third = $('svg rect:nth-child(3)')
  var i = true;

  svg.on('click', function(){
    if (i) {
      setTimeout(function(){
        $(this).find("g").addClass('gotcha')

        line_first.css({
          'transform':'rotate(45deg)',
          'left':'50%',
          'top':'50%',
          'width':'53px',
          // This line BELONGS to @dervondenbergen :D 
          // Enjoy your propriety my friend.
          'transform-origin': 'left bottom'
        })
        line_third.css({
          'transform':'rotate(-45deg) translate(-50%,-50%)',
          'left':'50%',
          'top':'50%'
        })
        line_second.css('opacity','0')
      },005)
    } else {
      setTimeout(function(){
        line_first.attr('style', '');
        line_third.attr('style', '');
        line_second.css('opacity','1')
      },005)
    }
    i=!i; 
  });
});


 
 /* USING UNICODE CHARACTERS */

<input type="checkbox" id="toggle-menu"/>
<label for="toggle-menu">
  <span class="menu-icon"></span>
</label>



@charset "UTF-8";
.menu-icon {
  font-size: 3em;
  max-width: 45px;
  text-align: center;
  display: block;
  margin: 15% auto;
  cursor: pointer;
  transition: transform .2s ease;
}
.menu-icon:hover {
  transform: scale(0.9);
}
.menu-icon:before, .menu-icon:after {
  line-height: .5;
}
.menu-icon:before {
  content: '☰';
  display: block;
}
.menu-icon:after {
  content: '╳';
  font-size: .75em;
  font-weight: 800;
  display: none;
}

#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon {
  transform: rotate(180deg);
}
#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:before {
  display: none;
}
#toggle-menu:checked ~ label[for="toggle-menu"] .menu-icon:after {
  display: block;
}


 
 /* PSEUDO ELEMENTS + 1 TAG */
 
 <span></span>
 
 
 span {
  margin: 15% auto;
  display: block;
  width: 45px;
  height: 45px;
  position: relative;
  display: block;
  width: 1.5em;
  height: 0.25em;
  background: #E04681;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .2s ease;
}
span:before, span:after {
  border-radius: 3px;
  transition: transform .3s ease;
}
span:before {
  content: '';
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: -0.5em;
  background: #E04681;
}
span:after {
  content: '';
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0.5em;
  background: #E04681;
}
span.close {
  width: 45px;
  height: 45px;
  margin: 15% auto;
  left: 10px;
  position: relative;
  display: block;
  width: 0;
  height: 0;
  background: transparent;
  transform: rotate(-180deg);
}
span.close:before, span.close:after {
  transition: transform .3s ease;
}
span.close:before {
  content: '';
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0;
  background: #E04681;
  transform: rotate(-45deg);
}
span.close:after {
  content: '';
  display: block;
  position: absolute;
  width: 1.5em;
  height: 0.25em;
  top: 0;
  background: #E04681;
  transform: rotate(45deg);
}


var $icon = $('span');
  $icon.on('click',function(e){
    $(this).toggleClass('close')
  });
  

 
 /* PSEUDO ELEMENTS + 3 TAGS */
 
 <div class="menu">
  <div class="bit-1"></div>
  <div class="bit-2"></div>
  <div class="bit-3"></div>
</div>


.menu {
  width: 3em;
  height: 3em;
  position: relative;
  z-index: 0;
  margin: 15% auto;
}
.menu .bit-1::before {
  content: '';
  left: 0.5em;
  top: 0.5em;
  position: absolute;
  width: 1em;
  transform-origin: left bottom;
  height: 0.3em;
  background: #2E313C;
  transition: transform 0.3s, top 0.3s;
}
.menu .bit-1::after {
  content: '';
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
  transform-origin: right bottom;
  height: 0.3em;
  background: #2E313C;
  transition: transform 0.3s, top 0.3s;
}
.menu .bit-2 {
  position: absolute;
  width: 2em;
  top: 50%;
  left: 50%;
  height: 0.3em;
  background: #2E313C;
  transform: translate(-50%, -50%);
  transition: transform 0.3s 0.3s, width 0.3s 0.6s;
}
.menu .bit-3::before {
  content: '';
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  width: 1em;
  transform-origin: left top;
  height: 0.3em;
  background: #2E313C;
  transition: transform 0.3s, bottom 0.3s;
}
.menu .bit-3::after {
  content: '';
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  width: 1em;
  transform-origin: right top;
  height: 0.3em;
  background: #2E313C;
  transition: transform 0.3s, bottom 0.3s;
}
.menu.open .bit-1:before {
  top: 0.4em;
  width: 1.2em;
  transform: rotate(45deg);
  transform-origin: left bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-1:after {
  top: 0.4em;
  width: 1.2em;
  transform: rotate(-45deg);
  transform-origin: right bottom;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, top 0.3s 0.3s;
}
.menu.open .bit-2 {
  width: 0.3em;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s 0.3s, width 0.3s;
}
.menu.open .bit-3:before {
  bottom: 0.4em;
  width: 1.2em;
  transform: rotate(-45deg);
  transform-origin: left top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}
.menu.open .bit-3:after {
  bottom: 0.4em;
  width: 1.2em;
  transform: rotate(45deg);
  transform-origin: right top;
  transition: transform 0.3s 0.3s, width 0.3s 0.3s, bottom 0.3s 0.3s;
}


var menu = document.querySelector('.menu');
function toggleMenu () {
  menu.classList.toggle('open');
}
menu.addEventListener('click', toggleMenu);


 
 /* PSEUDO ELEMENTS + ICONFONT */
 
 <span></span>
 
 
 @import url(http://weloveiconfonts.com/api/?family=entypo);
span {
  font-family: "entypo", sans-serif;
  font-size: 2em;
  display: block;
  margin: 15% auto;
  width: 45px;
  transition: transform .3s ease;
  transform-origin: 25% 50%;
}
span:before {
  content: "\2630";
}
span.close {
  transform: rotate(-180deg);
}
span.close:before {
  content: "\2715";
}


var menuSecond = document.querySelector('span');

function toggleMenuSecond () {
  menuSecond.classList.toggle('close');
}

menuSecond.addEventListener('click', toggleMenuSecond);