分享
三行代码  ›  专栏  ›  技术社区  ›  dirtgrub

汉堡菜单不可见

  •  0
  • dirtgrub  · 技术社区  · 1 周前

    我已经拼凑了一个组合网站使用几个教程,我不明白为什么汉堡包菜单是不可见的,因为它缩小了。当我将HTML中的主要内容与部分一起取出时,它工作得很好,但是如果有任何主要内容,那么汉堡菜单就不会出现。

    HTML格式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet"> 
        <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">  
        <title>Portfolio</title>
    </head>
    <body>
    
        <nav>
            <div class="logo">
                <h4>Portfolio</h4>
            </div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
    
        <main>
            <div class="about-area" id="about">
                <div class="text-part">
                    <h1>About</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam, 
                    exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis! 
                    Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem 
                    ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis 
                    minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio 
                    optio officia suscipit nemo natus!</p>
                </div>
            </div>
            <div class="portfolio-area" id="portfolio">
                <div class="text-part">
                    <h1>Portfolio</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam, 
                    exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis! 
                    Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem 
                    ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis 
                    minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio 
                    optio officia suscipit nemo natus!</p>
                </div>
            </div>
            <div class="contact-area" id="contact">
                <div class="text-part">
                    <h1>Contact</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam, 
                    exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis! 
                    Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem 
                    ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis 
                    minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio 
                    optio officia suscipit nemo natus!</p>
                </div>
            </div>
        </main>
    
    <script src="app.js"></script>
    </body>
    </html>
    

    * {
        margin: 0px; /* Remove unwanted inherent sizing */
        padding: 0px;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    nav {
        display: flex; /*icons are next to each other */
        justify-content: space-around; /*  */
        align-items: center; /* Center items vertically */
        min-height: 8vh;
        background-color: #0e9763;
        font-family: 'Poppins', sans-serif;
    }
    .logo {
        color: rgb(226, 226, 226);
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 20px;
    
    }
    .nav-links {
        display: flex; /* spreads out text */
        justify-content: space-around; /* using flex adds more space around the items using width */
        width: 30%;
    }
    .nav-links li {
        list-style: none; /* Removes bullet points */
    }
    .nav-links a{
        color: rgb(226, 226, 226);
        text-decoration: none; /* Removes default link colors */
        letter-spacing: 3px;
        font-size: 14px;
    }
    .burger {
        display: none; /* Hides the burger menu */
        cursor: pointer;
    }
    .burger div { /*the details of the burger menu bars design */
        width: 25px;
        height: 3px;
        background-color: rgb(226, 226, 226);
        margin: 5px;
        transition: all 0.3s ease;
    }
    /* Main Area Content */
    .about-area, .portfolio-area, .contact-area {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        height: 700px;
    }
    .text-part {
        width: 65%;
        height: 80%;
    }
    h1 {
        font-size: 50px;
        font-family: 'Audiowide', cursive;
    
    }
    p {
        font-size: 24px;
        line-height: 50px;
    }
    .about-area {
        background: #fefefe;
    }
    .portfolio-area {
        background: #0e9763;
        color: #fff;
    }
    .contact-area {
        background: #fefefe;
    }
    html {
        scroll-behavior: smooth;
    }
    a:hover {
        color: #000;
    }
    /* Quick fix breakpoint between max size and hamburger menu trigger */
    @media screen and (max-width:1024px){
        .nav-links {
            width: 60%;
        }
    }
    @media screen and (max-width:768px){
        body {
            overflow: hidden;
        }
        .nav-links {
            position: absolute;
            right: 0px;
            height: 92vh;
            top: 8vh;
            background-color: #0e9763;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            transform: translateX(100%); /* Moves content off screen */
            transition: transform 0.5s ease-in;
        }
        .nav-links li {
            opacity: 0;
        }
        .burger {
            display: block;
        }
    }
    .nav-active {
        transform: translateX(0%); /* When button is clicked the nav gets the transform */
    }
    
    /* Nav animation */
    @keyframes navLinkFade{
        from{
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    .toggle .line1 {
        transform: rotate(-45deg) translate(-5px,6px);
    }
    .toggle .line2 {
        opacity: 0;
    }
    .toggle .line3 {
        transform: rotate(45deg) translate(-5px,-6px);
    }
    

    JS公司:

    const navSlide = () => { //navSlide is = to an anonymous function
        const burger = document.querySelector('.burger');
        const nav = document.querySelector('.nav-links');
        const navLinks = document.querySelectorAll('.nav-links li'); 
    
        burger.addEventListener('click',() => { //on click run a function
            //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.5s ease forwards ${index / 7 + 0.5}s`
                }       
            });
            //Burger Animation
            burger.classList.toggle('toggle');
    
        });
    }
    //Invoke function
    navSlide();
    

    以下是指向代码笔的链接: https://codepen.io/justadirtgrub/pen/NWGJrde

    1 回复  |  直到 1 周前
        1
  •  1
  •   Ferin Patel    1 周前

    你需要添加 z-index .nav-active 出现在主要内容前

    const navSlide = () => {
      //navSlide is = to an anonymous function
      const burger = document.querySelector(".burger");
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
    
      burger.addEventListener("click", () => {
        //on click run a function
        //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.5s ease forwards ${
              index / 7 + 0.5
            }s`;
          }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
      });
    };
    //Invoke function
    navSlide();
    * {
      margin: 0px; /* Remove unwanted inherent sizing */
      padding: 0px;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    nav {
      display: flex; /*icons are next to each other */
      justify-content: space-around; /*  */
      align-items: center; /* Center items vertically */
      min-height: 8vh;
      background-color: #0e9763;
      font-family: "Poppins", sans-serif;
    }
    .logo {
      color: rgb(226, 226, 226);
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 20px;
    }
    .nav-links {
      display: flex; /* spreads out text */
      justify-content: space-around; /* using flex adds more space around the items using width */
      width: 30%;
    }
    .nav-links li {
      list-style: none; /* Removes bullet points */
    }
    .nav-links a {
      color: rgb(226, 226, 226);
      text-decoration: none; /* Removes default link colors */
      letter-spacing: 3px;
      font-size: 14px;
    }
    .burger {
      display: none; /* Hides the burger menu */
      cursor: pointer;
    }
    .burger div {
      /*the details of the burger menu bars design */
      width: 25px;
      height: 3px;
      background-color: rgb(226, 226, 226);
      margin: 5px;
      transition: all 0.3s ease;
    }
    /* Main Area Content */
    .about-area,
    .portfolio-area,
    .contact-area {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: row;
      width: 100%;
      height: 700px;
    }
    .text-part {
      width: 65%;
      height: 80%;
    }
    h1 {
      font-size: 50px;
      font-family: "Audiowide", cursive;
    }
    p {
      font-size: 24px;
      line-height: 50px;
    }
    .about-area {
      background: #fefefe;
    }
    .portfolio-area {
      background: #0e9763;
      color: #fff;
    }
    .contact-area {
      background: #fefefe;
    }
    html {
      scroll-behavior: smooth;
    }
    a:hover {
      color: #000;
    }
    /* Quick fix breakpoint between max size and hamburger menu trigger */
    @media screen and (max-width: 1024px) {
      .nav-links {
        width: 60%;
      }
    }
    @media screen and (max-width: 768px) {
      body {
        overflow: hidden;
      }
      .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #0e9763;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%); /* Moves content off screen */
        transition: transform 0.5s ease-in;
      }
      .nav-links li {
        opacity: 0;
      }
      .burger {
        display: block;
      }
    }
    .nav-active {
      transform: translateX(0%);
      z-index: 100; /* When button is clicked the nav gets the transform */
    }
    
    /* Nav animation */
    @keyframes navLinkFade {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0px);
      }
    }
    .toggle .line1 {
      transform: rotate(-45deg) translate(-5px, 6px);
    }
    .toggle .line2 {
      opacity: 0;
    }
    .toggle .line3 {
      transform: rotate(45deg) translate(-5px, -6px);
    }
    <!DOCTYPE html>
    
    <head>
      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
      <title>Portfolio</title>
    </head>
    
    <body>
    
      <nav>
        <div class="logo">
          <h4>Portfolio</h4>
        </div>
        <ul class="nav-links">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>
    
      <main>
        <div class="about-area" id="about">
          <div class="text-part">
            <h1>About</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
              exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
              Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
              ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
              minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
              optio officia suscipit nemo natus!</p>
          </div>
        </div>
        <div class="portfolio-area" id="portfolio">
          <div class="text-part">
            <h1>Portfolio</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
              exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
              Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
              ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
              minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
              optio officia suscipit nemo natus!</p>
          </div>
        </div>
        <div class="contact-area" id="contact">
          <div class="text-part">
            <h1>Contact</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore ullam,
              exercitationem voluptate enim nobis id quas praesentium, fugit ipsum porro omnis!
              Illo eum exercitationem eius, quam quae deserunt? Distinctio, voluptatibus. Lorem
              ipsum dolor sit amet consectetur adipisicing elit. Repellendus non ab iure, debitis
              minima at maxime nisi? Illum nesciunt nihil hic, provident dolorem molestias distinctio
              optio officia suscipit nemo natus!</p>
          </div>
        </div>
      </main>
    
    </body>
    
    </html>