При добавлении position:absolute
вручную к классу burger__line
линии преобразуются в крестик.
При добавлении position:absolute
через JS к классу burger__line
линии не преобразуются в крестик.
document.querySelector('.burger__lines').addEventListener('click', () => {
const line = document.querySelector('.burger__line');
const line1 = document.querySelector('.burger__line1');
const line2 = document.querySelector('.burger__line2');
const line3 = document.querySelector('.burger__line3');
line.style.position = 'absolute';
line1.style.transform = 'rotate(45deg)';
line2.style.opacity = 0;
line3.style.transform = 'rotate(-45deg)';
});
body{
background-color:#000;
}
.burger {
position: fixed;
}
.burger__lines {
cursor: pointer;
margin: 5px;
}
.burger__line {
width: 25px;
height: 3px;
margin-top: 5px;
background-color: #fff;
}
<div class="burger">
<div class="burger__lines">
<div class="burger__line burger__line1"></div>
<div class="burger__line burger__line2"></div>
<div class="burger__line burger__line3"></div>
</div>
</div>