0

При добавлении 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>

2
  • Опишите подробнее, потому что крестик становится крестиком через JS
    – user347472
    Commented 5 мар. 2021 в 0:04
  • а не проще ли через js при нажатие на бургер просто добавлять нужный клас? Commented 5 мар. 2021 в 0:07

1 ответ 1

0

Все потому что в переменной line у вас находиться 1 элемент. Вы задаете свойство только ему одному. введите сюда описание изображения

Что б получилось как вам нужно, можете воспользоваться циклом что б перебрать все элементы с данным классом, или более легкий способ, это поставить событие нажатия на сам бургер:

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;
    transition: 0.3s;
}
.burger-active .burger__line{
    position: absolute;
}
.burger-active .burger__line1{
    transform: rotate(45deg);
}
.burger-active .burger__line2{
    opacity: 0;
}
.burger-active .burger__line3{
    transform: rotate(-45deg);
}
 <div class="burger" onclick="this.classList.toggle('burger-active');">
  <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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.