Question

我试图将导航菜单添加到我的视差网站中，但是它不起作用，并且我尝试了许多其他方法，但是它都行不通，因此我决定在这里询问希望有人能提供帮助。 This is my navigation-menu on a parallax website 下面是我的代码。任何帮助将不胜感激！

body, html{
  height:100%;
  margin:0;
  font-size:16px;
  font-family:"Lato", sans-serif;
  font-weight:400;
  line-height:1.8em;
  color:#666;
}

.pimg1, .pimg2, .pimg3{
  position:relative;
  opacity:0.70;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /*
    fixed = parallax
    scroll = normal
  */
  background-attachment:fixed;
}

.pimg1{
  background-image:url('../img/brownie.jpg');
  min-height:100%;
}

.pimg2{
  background-image:url('../img/image2.jpg');
  min-height:400px;
}

.pimg3{
  background-image:url('../img/image3.jpg');
  min-height:400px;
}

.section{
  text-align:center;
  padding:50px 80px;
}

.section-light{
  background-color:#f4f4f4;
  color:#666;
}

.section-dark{
  background-color:#282e34;
  color:#ddd;
}

.ptext{
  position:absolute;
  top:50%;
  width:100%;
  text-align:center;
  color:#000;
  font-size:27px;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border{
  background-color:#111;
  color:#fff;
  padding:20px;
}

.ptext .border.trans{
  background-color:transparent;
}

@media(max-width:568px){
  .pimg1, .pimg2, .pimg3{
    background-attachment:scroll;
  }
}

a {
  /* color: white; */
}

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 100px;
  width: 100%;
  box-sizing: border-box;
  background: none;
}

header .logo {
  color: black;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  float: left;
  font-weight: bold;
}

header nav {
  float: right;
}

header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

header nav ul li {
  list-style: none;
  position: relative;
}

header nav ul li.sub-menu:before {
  content: '\f078';
  font-family: fontAwesome;
  position: absolute;
  line-height: 50px;
  color: white;
  right: 1px;
}

header nav ul li.active.sub-menu:before {
  content: '\f077';
}

header nav ul li ul {
  position: absolute;
  left: 0;
  background: inherit;
  display: none
}

header nav ul li.active ul {
  /* use li: hover instead */
  display: block;
}

header nav ul li ul li {
  display: block;
  width: 200px;
}

header nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: black;
  text-decoration: none;
  display: block;
}

header nav ul li a:hover {
  color: #fff;
  background: grey;
}

header nav ul li a.active {
  background: grey;
}

.menu-toggle {
  color: black;
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none
}

@media (max-width: 860px) {
  header {
    padding: 0 20px;
  }
  .menu-toggle {
    display: block;
  }
  header nav {
    /* use display none or left:-100% to hide the nav  */
    /* display: none; */
    position: absolute;
    top: 50px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 50px);
    background: #333;
    transition: 0.5s;
  }
  header nav.active {
    left: 0;
  }
  header nav ul {
    display: block;
    text-align: center;
  }
  header nav ul li a {
    border-bottom: 0.9px solid rgba(0, 0, 0, .2);
  }
  header nav ul li.active ul {
    position: relative;
    background: white;
  }
  header nav ul li ul li {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parallax Website</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header>
    <div class="logo">LOGO </div>
    <nav>
      <ul>
        <li class="sub-menu"><a href="#">Services</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </li>
        <li><a href="#">Team</a></li>


      </ul>
    </nav>
    <div class="menu-toggle">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </header>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(
      function() {
        $('.menu-toggle').click(function() {
          $('nav').toggleClass('active')
        })

        $('ul li').click(function() {
          $(this).siblings().removeClass('active');
          $(this).toggleClass('active');
        })
      }
    )

  </script>


  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Cookies
      </span>
    </div>
  </div>

  <section class="section section-light">
    <h2>Section One</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
    </p>
  </section>

  <div class="pimg2">
    <div class="ptext">
      <span class="border trans">
        Image Two Text
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Section Two</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
    </p>
  </section>

  <div class="pimg3">
    <div class="ptext">
      <span class="border trans">
        Image Three Text
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Section Three</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
    </p>
  </section>

  <div class="pimg1">
    <div class="ptext">
      <span class="border">
        Traversy Media
      </span>
    </div>
  </div>
</body>
</html>

Answer 1

将z-index属性添加到标题：

header {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 100px;
  width: 100%;
  box-sizing: border-box;
  background: none;
  z-index: 1;
}

您的标题位于视差图像的后面，因为它的位置是绝对的，并且您的视差图像在整个屏幕上。

为什么我的导航菜单在视差网站上不起作用？

1 个答案: