我做了一個網(wǎng)站，實現(xiàn)了一些東西，現(xiàn)在當我移動一些元素和CSS來組織和整理時，我的漢堡菜單在打開時停止顯示。導航條消失了，菜單也不顯示了，而不是有一個很好的動畫向下滑動，如果我檢查，我可以看到菜單在那里，但有什么東西覆蓋了它，或者有些不透明是錯誤的。但是我檢查了我所有的z-index和o-capacity，我看不出有什么問題。所以我想得到一些幫助，讓我的漢堡菜單顯示時，點擊顯示。

該漢堡僅在移動視圖中顯示，僅供參考

我將在下面包含一個代碼片段，但我認為這是導致問題的代碼:

<nav>
      <div class="nav-menu">
        <div class="burger-container">
          <div id="burger">
            <div class="bar topBar"></div>
            <div class="bar btmBar"></div>
          </div>
        </div>
        <ul class="menu">
          <li class="menu-item"><a href="#">Hem</a></li>
          <li class="menu-item"><a href="html/losenord.html">L?senord</a></li>
          <li class="menu-item">
            <a href="html/sakerhetshot.html">S?kerhetshot</a>
          </li>
          <li class="menu-item">
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li class="menu-item">
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li class="menu-item">
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
          <div class="flex-filler"></div>
          <li class="toggler-container">
            <div class="switcher">
              <span class="material-symbols-outlined"> dark_mode </span>
              <label class="switch">
                <input type="checkbox" id="checkBox" />
                <span class="slider"></span>
              </label>
              <span class="material-symbols-outlined"> light_mode </span>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="wrapper">
      <header class="parallax">
        <img src="https://cdn.imgpaste.net/2022/10/10/Kem93m.png" class="background" />
        <img src="https://cdn.imgpaste.net/2022/10/10/KemO9N.png" class="foreground" />
        <div class="hero-text">
          <h1>Lagar och s?kerhet</h1>
          <p>
            Hemsidan om lagar och s?kerhet p? internet h?r st?r det massa saker wow omg coolt :I
          </p>
        </div>
      </header>

.wrapper {
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      perspective: 10px;
    }
    
    nav {
      overflow: hidden;
    
      position: sticky;
      top: 0;
      left: 0;
    
      width: 100%;
    
      transition: 0.5s ease;
    
      background-color: var(--black-color);
    }
    
    .parallax {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      transform-style: preserve-3d;
      z-index: -10;
    }
    
    .background {
      transform: translateZ(-10px) scale(2);
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
    
    .foreground {
      transform: translateZ(-5px) scale(1.5);
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
    }
    
    .background,
    .foreground {
      position: absolute;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: -10;
    }
    
    .hero-text {
      text-align: center;
      color: var(--white-color);
    
      position: absolute;
      top: 50%;
      left: 50%;
    
      min-width: 14rem;
    
      transform: translate(-50%, -50%);
    }
    
    .hero-text > h1 {
      font-size: 3rem;
    }
    
    .hero-text > p {
      font-size: 1rem;
    }
    
    .burger-container {
      position: absolute;
      right: 1rem;
      top: 0.1rem;
    
      display: inline-block;
    
      height: 50px;
      width: 50px;
    
      transform: rotate(0deg);
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      user-select: none;
    
      z-index: 10;
    
      -webkit-tap-highlight-color: transparent;
    }
    
    #burger {
      position: relative;
      top: 50%;
    
      width: 18px;
      height: 8px;
    
      display: block;
    
      margin: -4px auto 0;
    }
    
    .bar {
      position: relative;
    
      width: 100%;
      height: 1px;
    
      display: block;
    
      background: var(--white-color);
    
      transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition-delay: 0s;
    }
    
    .topBar {
      transform: translateY(0px) rotate(0deg);
    }
    
    .btmBar {
      transform: translateY(6px) rotate(0deg);
    }
    
    .menu {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    
      padding: 0;
      background: var(--black-color);
      height: 100%;
    
      list-style: none;
    }
    
    .menu-item {
      transform: translateY(-200px);
      transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
    }
    
    .menu-item a {
      display: block;
      position: relative;
    
      color: var(--white-color);
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      text-decoration: none;
      font-size: 1.3rem;
      line-height: 2.35;
    
      border-bottom: 1px solid var(--body-bg-color);
    
      width: 100%;
    }
    
    .menu-item a:hover {
      color: var(--text-hover-color);
      text-decoration: none;
    }
    
    .nav-menu {
      height: 3.5rem;
      transition: height 0.4s;
    }
    
    .nav-menu.menu-opened {
      transition: height 0.4s;
    
      position: absolute;
      top: 0;
      opacity: 1;
      z-index: 20;
    
      height: 100vh;
      width: 100vw;
    }
    
    .nav-menu.menu-opened .burger-container {
      transform: rotate(90deg);
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar {
      transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition-delay: 0.2s;
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar.topBar {
      transform: translateY(4px) rotate(45deg);
    }
    
    .nav-menu.menu-opened .burger-container #burger .bar.btmBar {
      transform: translateY(3px) rotate(-45deg);
    }
    
    .nav-menu.menu-opened ul.menu li.menu-item {
      transform: scale(1) translateY(0px);
    }

片段:

$(document).ready(function () {
  // Hamburger
  $(".burger-container").click(function () {
    $(".nav-menu").toggleClass("menu-opened");
    $("body").toggleClass("unscrollable");
  });

  // Dark-Light switcher
  $("body").toggleClass("light", localStorage.toggled == "light");

  document.getElementById("checkBox").addEventListener("click", darkLight);

  function darkLight() {
    if (localStorage.toggled != "light") {
      $("body").toggleClass("light", true);
      localStorage.toggled = "light";
    } else {
      $("body").toggleClass("light", false);
      localStorage.toggled = "";
    }
  }

  if ($("body").hasClass("light")) {
    $("#checkBox").prop("checked", true);
  } else {
    $("#checkBox").prop("checked", false);
  }
});

// Scroll to top
button = document.getElementById("scroll-button");

button.addEventListener("click", topFunction);

window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
}

function topFunction() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Dark colors */
:root {
  --white-color: #d9d9d9;
  --black-color: #0d0d0d;

  --grey-color-1: #595959;

  --body-bg-color: #262626;

  --text-hover-color: #a6a6a6;
}

/* Light colors */
:root .light {
  --body-bg-color: #dfdfdf;

  --black-color: blue;
  --white-color: black;
}

/* ======== MAIN CSS ======== */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;

  background-color: var(--body-bg-color) !important;

  position: relative;

  overflow: hidden;

  font-family: "Nunito", sans-serif;
  color: var(--white-color);
}

main {
  background-color: var(--body-bg-color);
}

.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

nav {
  overflow: hidden;

  position: sticky;
  top: 0;
  left: 0;

  width: 100%;

  transition: 0.5s ease;

  background-color: var(--black-color);
}

.unscrollable {
  overflow: hidden;
}

.active {
  text-decoration: underline;
}

/* ======= PARALLAX ======= */

.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  z-index: -10;
}

.background {
  transform: translateZ(-10px) scale(2);
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.foreground {
  transform: translateZ(-5px) scale(1.5);
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.background,
.foreground {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -10;
}

.hero-text {
  text-align: center;
  color: var(--white-color);

  position: absolute;
  top: 50%;
  left: 50%;

  min-width: 14rem;

  transform: translate(-50%, -50%);
}

.hero-text > h1 {
  font-size: 3rem;
}

.hero-text > p {
  font-size: 1rem;
}

/* ======== HAMBURGER ======== */

.burger-container {
  position: absolute;
  right: 1rem;
  top: 0.1rem;

  display: inline-block;

  height: 50px;
  width: 50px;

  transform: rotate(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  user-select: none;

  z-index: 10;

  -webkit-tap-highlight-color: transparent;
}

#burger {
  position: relative;
  top: 50%;

  width: 18px;
  height: 8px;

  display: block;

  margin: -4px auto 0;
}

.bar {
  position: relative;

  width: 100%;
  height: 1px;

  display: block;

  background: var(--white-color);

  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0s;
}

.topBar {
  transform: translateY(0px) rotate(0deg);
}

.btmBar {
  transform: translateY(6px) rotate(0deg);
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  padding: 0;
  background: var(--black-color);
  height: 100%;

  list-style: none;
}

.menu-item {
  transform: translateY(-200px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
}

.menu-item a {
  display: block;
  position: relative;

  color: var(--white-color);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 2.35;

  border-bottom: 1px solid var(--body-bg-color);

  width: 100%;
}

.menu-item a:hover {
  color: var(--text-hover-color);
  text-decoration: none;
}

.nav-menu {
  height: 3.5rem;
  transition: height 0.4s;
}

.nav-menu.menu-opened {
  transition: height 0.4s;

  position: absolute;
  top: 0;
  opacity: 1;
  z-index: 20;

  height: 100vh;
  width: 100vw;
}

.nav-menu.menu-opened .burger-container {
  transform: rotate(90deg);
}

.nav-menu.menu-opened .burger-container #burger .bar {
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition-delay: 0.2s;
}

.nav-menu.menu-opened .burger-container #burger .bar.topBar {
  transform: translateY(4px) rotate(45deg);
}

.nav-menu.menu-opened .burger-container #burger .bar.btmBar {
  transform: translateY(3px) rotate(-45deg);
}

.nav-menu.menu-opened ul.menu li.menu-item {
  transform: scale(1) translateY(0px);
}

/* ======== Dark Light switcher ====== */

.switcher > span {
  color: var(--white-color);
  padding: 0 0.5rem;
  font-size: 1.3rem;
}

.switcher {
  display: flex;
  align-items: center;
}

.toggler-container {
  display: block;
  margin-top: 1rem;
  transform: translateY(-200px);
  transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 1);
}

.nav-menu.menu-opened ul.menu li.toggler-container {
  transform: scale(1) translateY(0px);
}

.switch {
  position: relative;
  align-self: center;

  display: inline-block;

  width: 3.2rem;
  height: 1.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  cursor: pointer;

  background-color: #808080;

  -webkit-transition: 0.4s;
  transition: 0.4s;

  border-radius: 1rem;
}

.slider:before {
  position: absolute;
  left: 4px;
  bottom: 4px;

  content: "";

  height: 1rem;
  width: 1rem;

  background-color: var(--white-color);

  -webkit-transition: 0.4s;
  transition: 0.4s;

  border-radius: 50%;
}

input:checked + .slider {
  background-color: #808080;
}

input:checked + .slider:before {
  -webkit-transform: translateX(1.7rem);
  -ms-transform: translateX(1.7rem);
  transform: translateX(1.7rem);
}

/* ======== CONTENT ======= */

.content {
  text-align: center;
  margin: 0 5% 0 5%;
  padding-top: 1.5rem;
  color: var(--white-color);
}

.content h2 {
  font-size: 1.4rem;
  font-family: "Roboto", sans-serif;
}

.content p {
  font-size: 1.1rem;
  font-family: "Nunito", sans-serif;
}

.img {
  display: block;
}

/* ======== UP ARROW ========*/

#scroll-button {
  display: none;

  position: fixed;
  bottom: 1rem;
  right: 1.2rem;

  z-index: 10;

  border: none;
  outline: none;

  background-color: transparent;
  color: var(--white-color);
  font-size: 1.5rem;

  cursor: pointer;

  border-radius: 50%;
}

/* ======== FOOTER ======== */

footer {
  padding: 3rem 0 6rem 0;
  background-color: var(--grey-color-1);
  position: sticky;
  bottom: 0;
  z-index: -20;
}

footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 1.3rem;
}

footer ul a {
  color: var(--white-color);
  text-decoration: none;
}

footer ul li {
  display: block;
  padding: 0.25rem 0;
}

footer ul a:hover {
  color: var(--text-hover-color);
}

footer hr {
  color: var(--text-hover-color);
  max-width: 13rem;
  margin: 1.5rem auto;
}

footer .copyright {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-hover-color);
}

/* ======== MEDIA QUERIES ======== */

/* TABLET */
@media only screen and (min-width: 600px) {
  /* ======= FOOTER ======= */
  footer ul {
    font-size: 1.1rem;
  }

  footer ul li {
    display: inline-block;
    padding: 0 0.2rem;
  }

  footer hr {
    max-width: 35rem;
  }
}

/* DESKTOP */
@media only screen and (min-width: 769px) {
  /* ======== MAIN CSS ======== */

  .hero-text {
    position: absolute;
    top: 40%;
    left: 30%;
    max-width: 20rem;
  }

  .hero-text > h1 {
    font-size: 3.5rem;
  }

  .hero-text > p {
    font-size: 1.2rem;
  }

  /* ======= Scrollbar ======== */
  ::-webkit-scrollbar {
    width: 7px;

    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 100px;

    background: rgb(109, 109, 109);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148, 148, 148);
  }

  /* ======== HAMBURGER ======== */

  .nav-menu {
    transition: all 0.3s ease-in, 0.5s ease-in;
    transition-delay: 0.25s;

    width: 100%;
    height: 3.5rem;

    display: flex;
    align-items: center;
  }

  .nav-menu.menu-opened {
    height: 100%;
  }

  .burger-container {
    display: none;
  }

  .menu-item {
    transform: scale(1) translateY(0px);

    display: inline;

    margin-right: 0.8rem;
    border-bottom: 0;
    margin-top: 0;
  }

  .menu {
    flex-direction: row;

    position: absolute;
    top: 0;

    margin: 0 0 0 1.5rem;

    height: 3.5rem;
    width: 100%;
  }

  .menu-item a {
    display: inline;

    border: none;

    font-size: 1rem;

    transition: all 0.15s cubic-bezier(0.54, 0.12, 0.54, 0.94);
  }

  .flex-filler {
    flex: 1 1 auto;
  }

  /* ======== Dark-light switcher ======== */

  .toggler-container {
    display: block;
    margin: 0 2.5rem 0 0;
    transform: scale(1) translateY(0px);
  }

  .switcher > span {
    font-size: 1.2rem;

    padding: 0 0.4rem;
  }

  .switch {
    width: 2.5rem;
    height: 1.3rem;
  }

  .slider:before {
    height: 0.8rem;
    width: 0.8rem;

    left: 4px;
    bottom: 4px;
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(1.2rem);
    -ms-transform: translateX(1.2rem);
    transform: translateX(1.2rem);
  }

  /* ======== CONTENT ========*/

  .content {
    margin: 0 20% 0 20%;
    padding-top: 2rem;
  }

  .content h2 {
    font-size: 1.5rem;
  }

  .content p {
    font-size: 1.15rem;
  }

  /* ======== UP ARROW ========*/

  #scroll-button {
    position: fixed;

    height: 3rem;
    width: 3rem;

    bottom: 1.1rem;
    right: 1.1rem;
  }

  #scroll-button:hover {
    background-color: rgba(160, 160, 160, 0.568);
    backdrop-filter: blur(15px);
  }

  /* ======= FOOTER ======= */
}

/* XL-DESKTOP */
@media only screen and (min-width: 1200px) {
  /* ======= HAMBURGER ======= */

  .menu-item {
    margin-right: 1.3rem;
  }

  .menu-item a {
    font-size: 1.1rem;
  }

  /* ======= FOOTER ======= */
  footer ul {
    font-size: 1.2rem;
  }

  footer ul li {
    padding: 0 0.4rem;
  }

  footer hr {
    max-width: 40rem;
  }
}

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lagar och s?kerhet | Hem</title>
    <link rel="stylesheet" href="css/style.css" />
    <link
      
      rel="stylesheet"
    />
    <link
      
      rel="stylesheet"
    />
    <link
      
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel="stylesheet"
      
    />
    <link
      rel="stylesheet"
      
    />
    <script defer src="js/script.js"></script>
  </head>
  <!--
    Att g?ra: 
    
    Fixa bilder till Hero parallax
    Skriva content
    Fixa bilder till content (Picture element, bootstrap)
    L?gga in all content p? index och subpages (Bootstrap)
    Fixa up arrow s? den funkar
    Tablet responsive media query
    Hamburger close animation (Inte prio)
  -->
  <body>
    <nav>
      <div class="nav-menu">
        <div class="burger-container">
          <div id="burger">
            <div class="bar topBar"></div>
            <div class="bar btmBar"></div>
          </div>
        </div>
        <ul class="menu">
          <li class="menu-item"><a href="#">Hem</a></li>
          <li class="menu-item"><a href="html/losenord.html">L?senord</a></li>
          <li class="menu-item">
            <a href="html/sakerhetshot.html">S?kerhetshot</a>
          </li>
          <li class="menu-item">
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li class="menu-item">
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li class="menu-item">
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
          <div class="flex-filler"></div>
          <li class="toggler-container">
            <div class="switcher">
              <span class="material-symbols-outlined"> dark_mode </span>
              <label class="switch">
                <input type="checkbox" id="checkBox" />
                <span class="slider"></span>
              </label>
              <span class="material-symbols-outlined"> light_mode </span>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="wrapper">
      <header class="parallax">
        <img src="https://cdn.imgpaste.net/2022/10/10/Kem93m.png" class="background" />
        <img src="https://cdn.imgpaste.net/2022/10/10/KemO9N.png" class="foreground" />
        <div class="hero-text">
          <h1>Lagar och s?kerhet</h1>
          <p>
            Hemsidan om lagar och s?kerhet p? internet h?r st?r det massa saker wow omg coolt :I
          </p>
        </div>
      </header>
      <main>
        <div class="content">
          <section>
            <h2>Hejehje</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni in aut quisquam ipsa,
              reiciendis quidem rem facilis quaerat nam est! Lorem ipsum dolor sit amet consectetur,
              adipisicing elit. Libero, nulla perferendis? Officia illo vitae alias obcaecati nulla
              porro quisquam, praesentium id vel ex culpa deleniti neque reiciendis officiis nisi
              quaerat.
            </p>
          </section>
          <picture class="img">
            <source media="(min-width: 900px)" srcset="imgs/template1000.jpg" />
            <img src="imgs/template500.jpg" alt="template500" />
          </picture>
        </div>
        <button id="scroll-button" title="G? till toppen">
          <i class="fas fa-arrow-up"></i>
        </button>
      </main>
      <footer>
        <ul class="list">
          <li>
            <a href="#" class="active">Hem</a>
          </li>
          <li>
            <a href="html/losenord.html">L?senord</a>
          </li>
          <li>
            <a href="html/sakerhetshot.html">S?kerhetshot</a>
          </li>
          <li>
            <a href="html/statlig-kontroll.html">Statlig kontroll</a>
          </li>
          <li>
            <a href="html/tredjepartskod.html">Tredjepartskod</a>
          </li>
          <li>
            <a href="html/webbhotell.html">Webbhotell</a>
          </li>
        </ul>
        <hr />
        <p class="copyright">Copyright &copy; All rights reserved by Vincent Cornelius</p>
      </footer>
    </div>
  </body>
</html>

問題是nav元素沒有高度。當通過添加menu-open類打開菜單時，它變成position: absolute并具有固定的高度，父元素的高度為0，因為它是折疊的。

我的建議是在& ltnav & gt元素而不是on。導航菜單，然后在CSS中添加:

nav.menu-opened { 
  height: 100vh;
}

問題是導航菜單項的位置，嘗試用

.nav-menu.menu-opened {
    position: relative !important;
}

當一個元素有一個絕對位置的子元素時，父元素不計算它的高度，所以父容器的高度為零