汉堡菜单按钮更改为x按钮

Question

我正在尝试创建一个汉堡包按钮，单击时会转到x。一切都很好，我只是不能使x标志完美的形状。我想知道我应该翻译汉堡包菜单的顶部和底部条纹的像素数。这是我的代码：

function toggleMenu() {
  y = document.querySelector(".header__hamburger");
  y.classList.toggle("click");
}

.bar {
  border: solid 2px black;
  margin-bottom: 5px;
  width: 36px;
  transition: 0.5s;
}

.header__hamburger {
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 3em;
}

.click .hamburger__bar1 {
  transform: rotate(45deg) translate(0, 12px);
}

.click .hamburger__bar2 {
  opacity: 0;
}

.click .hamburger__bar3 {
  transform: rotate(-45deg) translate(0, -12px);
}

<div class="header__hamburger" onclick="toggleMenu()">
  <div class="bar hamburger__bar1"></div>
  <div class="bar hamburger__bar2"></div>
  <div class="bar hamburger__bar3"></div>
</div>

Answer 1

试试这个

      function toggleMenu() {
        y = document.querySelector(".header__hamburger");
        y.classList.toggle("click");
      }

.bar {
position: absolute;
width: 36px;
height: 3px;
background-color: #000;
transition: 0.5s;
}
.hamburger__bar1{
      top: -8px;
}
 .hamburger__bar3{
      top: 8px;
 }
  .header__hamburger {
    display: inline-block;
position: absolute;
    right: 0;
    padding: 3em;
  }
  .header__hamburger > div{
      position: relative;
  }
  .click .hamburger__bar1 {
        transform: rotate(-45deg);
        top: 0;  
  }
  .click .hamburger__bar2{
        opacity: 0;
       
  }
  .click .hamburger__bar3{
        transform: rotate(45deg);
        top: 0;  
  }

<div class="header__hamburger" onclick="toggleMenu()">
  <div>
     <div class="bar hamburger__bar1"></div>
     <div class="bar hamburger__bar2"></div>
     <div class="bar hamburger__bar3"></div>
 </div>

</div>