如何使用 PHP 更改移动菜单图标（切换汉堡菜单）

Question

我正在使用 AMP-WP 网站上的汉堡切换方法，并将文本替换为符号 ☰ 来创建汉堡。

https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/

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

一切都很好，除了我想在菜单打开/活动时将符号更改为✕。

请问需要什么 PHP 才能做到这一点？

Answer 1

您需要采用不同的方法，您的图标实际上是一组 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>