关闭时CSS汉堡包菜单减半

Question

我已经成功编码了一个CSS / JS汉堡菜单，单击该菜单时会带有一个转换图标。但是，我刚刚发现了一个错误，其中单击了“关闭”汉堡包按钮时，导航菜单在标题的后面切开，使其看起来很凌乱。

当前，单击汉堡包时菜单正确打开-为100vh-但关闭时似乎在标题的后面切开，因此看起来大约为80vh。当它关闭时，我希望它保持在100vh。

为冗长的代码预先致歉。

这是我的代码：

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);

.universal-header-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}

.universal-header-hamburger {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#hamburger {
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
  z-index: 99;
}

.hamburger-span {
  height: 5px;
  width: 30px;
  background-color: #342b38;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

#hamburger-line-1.active {
  transform: translateY(7.5px) rotate(-45deg);
}

#hamburger-line-2.active {
  transform: translateY(-7.5px) rotate(45deg)
}

.universal-header-logo {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-basket {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#hamburger-nav-list {
  height: 100vh;
  width: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: yellow;
  transition: all 0.5s ease-in-out;
}

#hamburger-nav-list.active {
  height: 100vh;
  width: 30%;
  position: fixed;
}

  <header class="universal-header-section">
    <div class="universal-header-container">
      <div class="universal-header-hamburger">
        <div id="hamburger">
          <span id="hamburger-line-1" class="hamburger-span"></span>
          <span id="hamburger-line-2" class="hamburger-span"></span>
        </div>
      </div>
      <div class="universal-header-logo">
        <a href="index">
          <h2>Logo</h2>
        </a>
      </div>
      <div class="universal-header-basket">
        <a href="basket">
          <i class="fas fa-shopping-cart fa-2x"></i>
        </a>

      </div>
    </div>
  </header>


  <div id="hamburger-nav-list">
    <div class="hamburger-container">

    </div>
  </div>

谢谢。

Answer 1

您认为这是使其工作最简单的编辑吗？

更改了位置：绝对/弯曲

DOM元素的顺序也发生了变化（最重要）

希望它没有中断任何内容：）

// Variables

let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");


// Function

function hamburgerActive() {
  line1.classList.toggle("active");
  line2.classList.toggle("active");
  navList.classList.toggle("active");
}

// Event Listener

hamburger.addEventListener("click", hamburgerActive);

.universal-header-section {
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-container {
  height: 90%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
}

.universal-header-hamburger {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#hamburger {
  height: 20px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  cursor: pointer;
  z-index: 9999;
}

.hamburger-span {
  height: 5px;
  width: 30px;
  background-color: #342b38;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

#hamburger-line-1.active {
  transform: translateY(7.5px) rotate(-45deg);
}

#hamburger-line-2.active {
  transform: translateY(-7.5px) rotate(45deg)
}

.universal-header-logo {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.universal-header-basket {
  height: 100%;
  width: 33.33%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#hamburger-nav-list {
  height: 100vh;
  width: 0;
  top: 0;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: yellow;
  transition: all 0.5s ease-in-out;
  position:absolute;
}

#hamburger-nav-list.active {
  height: 100vh;
  width: 30%;
  position: fixed;
  z-index: ;
  display:flex;
}

  <div id="hamburger-nav-list">
    <div class="hamburger-container">

    </div>
  </div>
  <header class="universal-header-section">
    <div class="universal-header-container">
      <div class="universal-header-hamburger">
        <div id="hamburger">
          <span id="hamburger-line-1" class="hamburger-span"></span>
          <span id="hamburger-line-2" class="hamburger-span"></span>
        </div>
      </div>
      <div class="universal-header-logo">
        <a href="index">
          <h2>Logo</h2>
        </a>
      </div>
      <div class="universal-header-basket">
        <a href="basket">
          <i class="fas fa-shopping-cart fa-2x"></i>
        </a>

      </div>
    </div>
  </header>