Menu to cross (pseudo elements and CSS transforms)

menu-to-cross.css

ul#hitbox {
  list-style: none;
  padding: 20px 10px; // padding to make a hitbox
  height: 20px;
  width: 20px;
  cursor: pointer;
}

li#cross {
  background: #e04681;
  height: 2px;
  transition: .25s all;
}

#cross::before,
#cross::after {
  content: '';
  background: #e04681;
  height: 2px;
  position: relative;
  display: block;
  transform-origin: 50% 50%;
  transform: rotate(0deg) translate(0,0);
  transition: .5s all;
}

#cross::before {
  top: -5px;
}

#cross::after {
  top: 3px;
}

#cross.active {
  background: transparent;
}

#cross.active::before {
  transform: rotate(45deg) translate(4px, 4px);
}

#cross.active::after {
  transform: rotate(135deg) translate(-3px, 3px);
}

menu-to-cross.html

<ul id="hitbox">
  <li id="cross"></li>
</ul>

menu-to-cross.js

// Using jQuery:

$('#hitbox').click(function(){
  $('#cross').toggleClass('active');
});



// Using vanilla JS:

const el = e => document.getElementById(e);
// This is just a shorthand func for getElementById

el('hitbox').addEventListener('click', () => {
    el('cross').classList.toggle('active');
});

Love it!