Как мне исправить панель навигации, чтобы меню удалялось, когда человек не просматривает панель навигации? | CSS / Javascript

Question

Вопрос

Это довольно сложно объяснить, но:

У меня есть меню для гамбургеров, которое я использую, когда экран меньше определенного количества пикселей.

Меню гамбургера скользит по экрану как наложение.

Однако, когда меню гамбургера не просматривается, оно все равно влияет на страницу. Это означает, что когда я использую margin: auto, вещи не центрируются должным образом, потому что все еще есть внеэкранное меню.

Кроме того, на мобильном телефоне по какой-то причине я могу фактически прокрутить, чтобы увидеть гамбургерное меню, даже если он не был нажат.

Вот код, который используется для панели навигации:

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');
  // Toggle Nav
  burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
    //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`
      }
    })
    //Burger Animation
    burger.classList.toggle('toggle');
  })
}
navSlide();

  nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 50%;
  flex-wrap: nowrap;
}

.nav-links li {
  list-style: none;
}

.burger div {
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
}

.burger {
  display: none;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 50%;
  }
}

@media screen and (max-width: 997px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    flex-direction: column;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .burger {
    display: block;
  }

<nav>
  <div class="logo">
    <h4>XXX</h4>
  </div>
  <ul class="nav-links">
    <li class=".page1-btn btn" id="active"><a id="additionally-active" href="index.html">Home</a></li>
    <li class=".page2-btn btn"><a href="page1.html">page1</a></li>
    <li class=".page3-btn btn"><a href="page2.html">page2.html</a></li>
    <li class=".page4-btn btn"><a href="page3.html">page3.html</a></li>
    <li class=".page5-btn btn"><a href="page4.html">page4.html</a></li>
  </ul>
  <div class="burger">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
  </div>

</nav>

Если вы знаете, как полностью удалить содержимое меню со страницы, когда гамбургер-меню не используется, мы будем очень признательны.

Я надеюсь, что это можно исправить с помощью переключателя в javascript, но не могу придумать, как это сделать?

Answer 1

Трудно понять вашу проблему. Я думаю, вы хотите дать пользователю элемент управления для переключения меню навигации.

Если вы хотите, чтобы ваше меню навигации было частью экрана:

1. Для мобильных устройств оставьте меню навигации скрытым.
2. Для веб-устройств добавьте кнопку над меню навигации, которая будет переключать видимость вашего меню навигации.

Если вы хотите использовать его в качестве наложения, это даже лучше. Для этого вы должны предоставить своему навигационному меню абсолютное положение. Если нажата кнопка или lo go, вызывается функция execute.

function execute() {
  var x = document.querySelector(".class_name");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}