Как изменить значок мобильного меню с помощью PHP (переключение меню гамбургера) - PullRequest
Новая
       2

Как изменить значок мобильного меню с помощью PHP (переключение меню гамбургера)

1 голос
/ 17 марта 2019

Я использую метод переключения гамбургеров с веб-сайта AMP-WP и заменил текст символом ☰ для создания гамбургера.

https://amp -wp.org / документация / playbooks / переключая-гамбургер-меню / 

<?php echo( '☰' ); ?>

Все отлично работает, за исключением того, что я хотел бы изменить символ на ✕, когда меню открыто / активно.

Какой PHP требуется для этого, пожалуйста?

1 Ответ

0 голосов
/ 17 марта 2019

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

const hamburger = document.querySelector('#hamburger-toggle');

hamburger.addEventListener('click', function() {
  if (this.classList.contains('open')) {
    this.classList.remove('open');
  } else {
    this.classList.add('open');
  }
});
#hamburger-toggle {
  position: relative;
  cursor: pointer;
  height: 40px;
  width: 50px;
  margin: 10px 0;
  padding: 10px 0;   
}
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: black;
  margin-top: 6px;
  opacity: 1;
}
.hamburger-line-1 {
  margin-top: 0;
}
.hamburger-line-1, .hamburger-line-3 {
  transform-style: preserve-3d;
  transition: transform 200ms; /* this line animates the change in position */
  transform: translateY(0px) rotateZ(0deg);
}
.hamburger-line-2 {
  transition: opacity 200ms; /* this line animates the change in opacity fading in/out the middle hamburger line */
}
#hamburger-toggle.open .hamburger-line-1 {
  transform-style: preserve-3d;
  transition: transform 200ms;
  transform: translateY(8px) rotateZ(44deg);
}
#hamburger-toggle.open .hamburger-line-2 {
  transition: opacity 200ms;
  opacity: 0;
}
#hamburger-toggle.open .hamburger-line-3 {
  transform-style: preserve-3d;
  transition: transform 200ms;
  transform: translateY(-8px) rotateZ(-44deg);
}
<div id="hamburger-toggle">
  <span class="hamburger-line hamburger-line-1"></span>
  <span class="hamburger-line hamburger-line-2"></span>
  <span class="hamburger-line hamburger-line-3"></span>
</div>
...