hamburger menu on close animation - css

Question

I'm creating a hamburger menu but I have some problems with an animation.
I created 2 divs, 1 for the 3 basic horizontal lines, and one for the " X ". I know how to hide and show them with jQuery ( like, one you click on the 3 lines, the 3 lines hides, and the " X " shows ) but I want to create an animation on that " X " like it's drawn both " \ " and " / " simultaneously. Like it stars from the top corner and it ends and the bottom. I don't really know how to explain this and my english is bad. here's what I did so far
<div class="x">
<div></div>
<div></div>
</div>
and the CSS
.x {
position: fixed;
top:47%;
left: 5%; }
.x div {
width: 40px;
height: 2px;
background-color: #000000; }
.x div:nth-child(1) {
transform: rotate(45deg); }
.x div:nth-child(2) {
transform: rotate(-45deg); }
I tried to create an animation on each line which starts from witdh:0 ( 0% ) and witdh:40px ( 100% ) but because I used the transform property it doesn't animate the way I want, it changes the positions and stuff.
Ty and I'm really sorry, but I don't know how to explain this.

Answer 1

I think you're looking for something like this:
document.addEventListener('DOMContentLoaded', function(){
var menus = document.querySelectorAll('.menu');
var onClick = function(){
this.classList.toggle('open');
}
menus.forEach(function(menu, index){
menu.addEventListener('click', onClick);
});
});
body {
margin: 20px;
}
.menu {
cursor: pointer;
height: 24px;
list-style: none;
margin: 0;
padding: 0;
width: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu li {
background-color: #111;
border-radius: 4px;
display: block;
height: 4px;
left: 0;
margin: 0;
opacity: 1;
padding: 0;
position: absolute;
width: 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
.menu li:nth-child(1) {
top: 0;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu.open li:nth-child(1) {
left: 4px;
top: -1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.open li:nth-child(2) {
opacity: 0;
width: 0;
}
.menu.open li:nth-child(3) {
left: 4px;
top: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<ul class="menu">
<li></li>
<li></li>
<li></li>
</ul>
with jQuery
$(document).ready(function(){
$('.menu').click(function(){
$(this).toggleClass('open');
});
});

Answer 2

Bogdan. I made an example for you, if I correctly understood your question.
HTML:
<div id="hamburger" class="hamburger hamburger_active">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</div>
CSS:
.hamburger {
width: 40px;
height: 40px;
position: fixed;
top:50%;
left: 50%;
border: 1px solid red;
}
.hamburger.hamburger_active .hamburger__line {
width: 100%;
}
.hamburger__line {
width: 0;
height: 2px;
position: absolute;
transform-origin: 20px 0;
top: 50%;
left: 0;
background-color: #000000;
transition: width .3s ease;
}
.hamburger__line:nth-child(1) {
transform: rotate(45deg);
}
.hamburger__line:nth-child(2) {
transform: rotate(135deg);
}
jQuery:
var $menu = $("#hamburger");
$menu.click(function() {
$(this).toggleClass('hamburger_active');
});