如何修復導航欄，以便在該人未查看導航欄時刪除菜單？ | 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. 對於 web 設備，在導航菜單上方提供一個按鈕，該按鈕將切換導航菜單的可見性。

如果您想將其作為疊加層，那就更好了。為此，您必須為導航菜單提供 position 絕對值。如果單擊按鈕或徽標，則執行 function 被調用。

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