I need help creating an animated hamburger menu icon with three lines that form into an X shape when clicked. Currently, I'm struggling to align the first horizontal line and the third one properly.
Does anyone know how to make two flexbox children overlap each other at the center of the parent div?
This is what I have so far:
[].forEach.call(document.querySelectorAll('#hSandwich'), function(el) {
el.addEventListener('click', function() {
var ct = document.querySelector('#hSandwich');
var l1 = document.querySelector('.hSandwich-01');
var l2 = document.querySelector('.hSandwich-02');
var l3 = document.querySelector('.hSandwich-03');
l1.classList.toggle('hSandwich-01-x');
l2.classList.toggle('hSandwich-02-x');
l3.classList.toggle('hSandwich-03-x');
ct.classList.toggle('hSandwich-x');
})
})#hSandwich {
width:40px;
height:40px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.hSandwichItem {
width:60%;
height:10%;
border-radius:10px;
background:grey;
margin:2px 0 2px 0;
transition: all 0.2s ease-out;
}
.hSandwich-01-x {
position:relative;
margin-top:-50%;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.hSandwich-02-x {
opacity:0;
}
.hSandwich-03-x {
position:relative;
margin-top:-50%;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}<div id="hSandwich">
<div class="hSandwich-01 hSandwichItem"></div>
<div class="hSandwich-02 hSandwichItem"></div>
<div class="hSandwich-03 hSandwichItem"></div>
</div>Thank you for your assistance.