Почему мое навигационное меню не работает на веб-сайте параллакса? - PullRequest
Новая
       8

Почему мое навигационное меню не работает на веб-сайте параллакса?

0 голосов
/ 03 октября 2018

Я пытался добавить навигационное меню на свой веб-сайт параллакса, но он не работает, и я пробовал много других методов, но он просто не работает, поэтому я решил спросить здесь, надеясь, что кто-то поможет. Это мое навигационное меню на веб-сайте параллакса Ниже мой код.Любая помощь будет высоко оценен!!

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>

1 Ответ

0 голосов
/ 03 октября 2018

Добавление свойства z-index в заголовок: 

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

Ваш заголовок находится за изображением параллакса, поскольку он имеет абсолютную позицию и ваше изображение параллакса находится по всему экрану.

...