javascript - 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>

提前致谢。

标签： javascriptcss

Answer 1

Think this is easiest edit to make it work?

Changed the position: absolute / flex

Also the order of DOM elements changed around (most important)

Hope it didnt break anyting :)

// 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>