如何添加如图所示的导航栏?(HTML CSS)

纳撒尼尔·杜萨

我正在制作一个具有视差滚动效果的网站。我试图添加一个导航栏,如第一张图片所示。但它始终停留在图片上方,我在 css 中尝试了多种方法但没有结果。

<!-- https://codepen.io/Yung_n-d/pen/mdwQGqX -->

导航栏位于图像上方

维拉

您可以设置position:fixed结合其position(x and y axis),widthz-index使其可见

  html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

.p-content {
  width: 100%;
  height: 100%;
  margin: auto;
}
.p-content01 {
  width: 100%;
  height: 100%;
  margin: auto;
  background: url(https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  top: 0;
  bottom: 0;
  display: table;
}
.p-content01_inner {
  max-width: 450px;
  min-width: 320px;
  width: 100%;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.p-content01_inner h1 {
  font-family: "Century Gothic", sans-serif;
  color: #f9f8f7;
  font-size: 40px;
  text-shadow: 0 0 300px #ff0;
}
.p-content01_inner a {
  color: #f9f8f7;
  font-family: "Century Gothic", sans-serif;
  text-decoration: none;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.2s ease-out;
}
.p-content01_inner a:hover {
  color: #bd7286;
  border: 2px solid #bd7286;
  transition: all 0.2s ease-in;
}
.p-content02 {
  max-width: 750px;
  min-width: 320px;
  width: 100%;
  margin: auto;
}
.p-content02 p {
  font-size: 100%;
  color: #3c2f2f;
}
.p-content03 {
  width: 100%;
  height: 100%;
  margin: auto;
  background: url(https://images.pexels.com/photos/1089451/pexels-photo-1089451.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  top: 0;
  display: table;
}
.p-content03_inner {
  max-width: 450px;
  min-width: 320px;
  width: 100%;
  margin: auto;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.p-content03_inner h2 {
  font-family: "Century Gothic", sans-serif;
  color: #f9f8f7;
  font-size: 40px;
  text-shadow: 0 0 300px #ff3c41;
}
.p-content03_inner a {
  color: #f9f8f7;
  font-family: "Century Gothic", sans-serif;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.2s ease-out;
}
.p-content03_inner a:hover {
  color: #3e7757;
  border: 1px solid #3e7757;
  transition: all 0.2s ease-in;
}

.nav-bar {
    height: 70px;
    margin-top:30px;
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  }
   
  .brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 70px;
    text-transform: uppercase;
    font-size: 1.4em;
  }
  .brand a img {
   max-height: 70px;
  }
  .brand a,
  .brand a:visited {
    color: #ffffff;
    text-decoration: none;
  }
   
  .nav-container {
    max-width: 1000px;
    margin: 0 auto;
  }
   
  nav {
    float: right;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    float: left;
    position: relative;
  }
  nav ul li a,
  nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    color: #fff;
    text-decoration: none;
  }
#dropdwnBk{
    background: linear-gradient(90deg, #4158d0 0%, #6356cc 25%, #8154c8 50%, #a252c4 75%, #c850c0 100%);
}



  nav ul li a:hover,
  nav ul li a:visited:hover {
    color: #ffffff;
    text-decoration: none;
  }
  
  nav ul li a:not(:only-child):after,
  nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
  }
  nav ul li ul li {
    min-width: 190px;
  }
  nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
  }
   
  .nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  }
  

  
  .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 70px;
    width: 70px;
  }
   
  @media only screen and (max-width: 798px) {
    .nav-mobile {
      display: block;
    }
   
    nav {
      width: 100%;
      padding: 70px 0 15px;
    }
    nav ul {
      display: none;
    }
    nav ul li {
      float: none;
    }
    nav ul li a {
      padding: 15px;
      line-height: 20px;
   padding-left: 25%;
   
    }
    nav ul li ul li a {
      padding-left: 30%;
    }
   
    .nav-dropdown {
      position: static;
    }
   .brand a img {
   max-height: 60px;
   margin-top: 5px;
   }
  }
  @media screen and (min-width: 799px) {
    .nav-list {
      display: block !important;
    }
  }
  #nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -10px;
  }
  #nav-toggle span:after {
    bottom: -10px;
  }
  #nav-toggle.active span {
    background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);
  }
  #nav-toggle.active span:after {
    transform: rotate(-45deg);
  }
<section class="nav-bar">
  <div class="nav-container">
    <div class="brand">
      <a href="index.php"><img src="img/heart.gif"></a>
    </div>
    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span class="material-icons"></span></a></div>
      <ul class="nav-list selected">
      <li>
            <a href="index.php">Home</a>
        </li>
        <li>
          <a href="view.php">Gallery</a>
        </li>
        <li>
          <a href="download.php">Download</a>
        </li>
        <li>
            <a href="logout.php">Log out</a>
        </li>
        <li>
          <a href="#">Over ons</a>
          <ul id="dropdwnBk" class="nav-dropdown">
            <li>
              <a  href="aboutMe.php">Nathanael Dousa</a>
            </li>
            <li>
              <a href="wife.php">Gritchaya Taengthai (Wie weet dousa binnekort)</a>
            </li>
            <li>
              <a href="us.php">Us <3</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</section>  
<div id="top" class="p-content">
    <section class="p-content01">
      <div class="p-content01_inner">
        <h1>LITTLE CODE</h1>
        <a href="#">GET STARTED</a>
      </div>
    </section>
    <section class="p-content03">
      <div class="p-content03_inner">
        <h2>PARRALAX</h2>
        <a href="#top" >link code</a>
      </div>
    </section>
    <section class="p-content02">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vel ducimus nihil quod incidunt iste delectus, assumenda, molestiae, quia neque dolores rerum accusantium a doloremque commodi? Sapiente iusto ipsam rem obcaecati, error maiores expedita
        itaque saepe architecto ea at assumenda fugit, numquam ex corporis! Dolor!</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum voluptatum neque deserunt, adipisci, molestias veniam consequatur ipsa earum expedita repudiandae incidunt quam eligendi sunt optio similique sequi non ad praesentium tempora alias. Sint
        error quod dolor vero accusantium maxime a, iste eveniet laudantium? Delectus, iure!</p>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, porro quidem. A fuga iure quos sapiente facilis? Distinctio officia pariatur id provident adipisci architecto eligendi eveniet, labore nihil ratione. Velit dolor praesentium nihil exercitationem,
        officia quam at corporis illo reprehenderit dignissimos ipsa, magnam quos laborum aperiam cupiditate. Velit ab exercitationem quos inventore voluptas ratione non repellat, quas autem eligendi architecto, numquam dolores eos ducimus impedit dolorum
        quia incidunt nobis molestias sunt quidem? Consectetur quos at minima, vel similique cumque. Nisi hic aspernatur recusandae pariatur sapiente! Repellat itaque, necessitatibus perspiciatis nemo veritatis similique, voluptates veniam alias temporibus
        impedit distinctio laboriosam debitis.</p>
    </section>
  </div>

在这里更新了 Codepen

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章