为什么我不能将nav作为下拉转换的目标？

Question

我正在尝试获取一个转换，以便在点击汉堡菜单时激活。我的javascript和css除了创建一个从上到下的缓慢的nav下拉转换之外，其他所有功能都可以实现。

试图在网上找到一个答案，让我找到了许多不同的方法来创造一个过渡。所以我对此迷路了，如果有一个标准的方法来做这件事，请协助我。我不是想偷懒，但我看到了5种不同的方法。不确定我需要在我的CSS中瞄准什么。谢谢

<header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner"></span>
    </span>
  </button>
  <img class="header-logo" src="/logo/piancavallo-logo.svg" alt="">
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
  <img class="search-icon" src="/logo/search-icon.svg" alt="">
  <img class="shopping-cart" src="/logo/shopping-cart.svg" alt="">
</header>

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
}
nav .nav-links {
  display: none;
  background-color: orange;
  font-size: 1.4rem;
  position: absolute;
  width: 100vw;
}
nav .nav-active {
  display: block;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  margin: 5px;
  padding: 5px;
}
nav a {
  text-decoration: none;
  color: green;
  font-weight: 700;
}
nav ul {
  -webkit-transition: height 1s ease-in;
  transition: height 1s ease-in;
}

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('is-active');
  }, false);

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
  });
}

revealNav();

Answer 1

据我所知，没有一个标准或更好的方法来做到这一点，这很大程度上取决于你试图达到的视觉效果。

我这里有一个解决方案，我已经剥离了大部分不需要的CSS，顶部/底部转换。

我还有一个不透明性的跳跃，这在开发过程中可能会很有帮助，因为它会向您显示添加或删除类的确切时间。

null

const revealNav = () => {
  const hamburger = document.querySelector('.hamburger');
  const nav = document.querySelector('.nav-links');

  hamburger.addEventListener('click', () => {
    nav.classList.toggle('is-active');
  });
}

revealNav();

nav {
  overflow: hidden;
}

.nav-links {
  opacity: 1; /* only to show when class is added */
  background-color: orange;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 1s;
  transform: translateY(-100%);
}

.nav-links.is-active {
  opacity: 1; /* only to show when class is added */
  transform: translateY(0);
}

<header>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
        <span class="hamburger-inner">hamburger</span>
    </span>
  </button>
  <nav>
    <ul class="nav-links">
      <li><a href="index.html">home</a></li>
      <li><a href="shop.html">shop</a></li>
      <li><a href="sport.html">sport</a></li>
      <li><a href="read.html">read</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
  </nav>
</header>