页面加载时导航栏出现问题

Question

您可以在此处找到指向我的网站的链接以供参考：http://pensacola.co.uk/

在桌面设备上，当您单击汉堡菜单时，导航栏会从页面右侧过渡。此功能可以正常工作，但是在移动设备上，当页面加载时，它包含右侧的导航项，因此无法正常工作。有什么办法可以解决这个问题，以便在您单击汉堡菜单之前只播种我的页面内容？

HTML

<nav>
    <div class="logo">
      <a href="/">Pensacola</a>
    </div>
    <ul class="nav-links">
      <li><a href="people.html">People</a></li>
      <li><a href="culture.html">Culture</a></li>
      <li><a href="film.html">Film</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="podcast.html">Podcast</a></li>
      <li><a href="books.html">Books</a></li>
      <li><a href="art.html">Art</a></li>
      <li><p>Pensacola is an independent journalism blog based in the United Kingdom. Focusing on people, culture, art & media.</p></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>

CSS

/* Navigtaion - Responsive Format */

@media screen and (max-width:2000px) {

  body {
    overflow-x: hidden;
  }

  .nav-links {
    background-color: #F4F4F4;
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0px;
    top: 50px;
    display: flex;
    flex-direction: column;
    align-items: left;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    padding-top: 50px;
  }

  nav {
    background-color: #F4F4F4;
  }

  .burger {
    display: block;
    cursor: pointer;
  }

}

@media screen and (max-width: 900px) {

  .nav-links li {
    font-size: 20pt;
  }

  .nav-links li p {
    width: 90%;
  }

}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px,5px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px,-5px);
}

JS

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click',()=> {
    // Toggle nav
    nav.classList.toggle('nav-active');

    // Animate links
    navLinks.forEach((link, index) => {
      if(link.style.animation) {
         link.style.animation = '';
      } else {
      link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 3}s`;
    }
  });

  //Burger animation
  burger.classList.toggle('toggle');

});

}

Answer 1

您需要像这样将 z-index 属性添加到.nav-links。

@media screen and (max-width: 900px) {
.nav-links { z-index: 100; }
}

希望对你有帮助。