汉堡菜单不可见

时间：2020-05-23 04:02:31

标签： javascript html css

我使用一些教程将一个投资组合网站拼凑而成，但我无法弄清为什么汉堡包菜单缩小后不可见。当我在各部分中提取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>

CSS：

* {
    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 个答案:

答案 0 :(得分：1)

您需要向类z-index中添加.nav-active css属性，以显示在主要内容的前面

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>

相关问题
最新问题