How to Change Mobile Menu Icon Using PHP (Toggling Hamburger Menu) - php

Question

I'm using the hamburger toggling method from the AMP-WP website and replaced the text with a symbol ☰ to create the hamburger.
https://amp-wp.org/documentation/playbooks/toggling-hamburger-menus/
<?php echo( '☰' ); ?>
Everything works great, apart from I'd like to change the symbol to ✕ when the menu is open/active.
What PHP is required to do this please?

Answer 1

You need to take a different approach where your icon is really a set of HTML elements where each line is separate and can be targeted by animation, CSS transforms in this case:
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>