Question

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

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

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

除了菜单打开/活动时我想将符号更改为apart之外，其他所有功能都很好。

请执行此操作需要什么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>

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

1 个答案: