如何添加如图所示的导航栏？ (Html CSS)
How to add the navbar as in the picture? (Html CSS)
我正在制作一个具有视差滚动效果的网站。我试图像第一张图片一样添加导航栏。
但它总是停留在图片上方，我在css中尝试了很多东西都没有结果。
<!-- https://codepen.io/Yung_n-d/pen/mdwQGqX -->
The navbar is above the image
您可以将 position:fixed 与其 position(x and y axis)、width 和 z-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 here
我正在制作一个具有视差滚动效果的网站。我试图像第一张图片一样添加导航栏。 但它总是停留在图片上方，我在css中尝试了很多东西都没有结果。
<!-- https://codepen.io/Yung_n-d/pen/mdwQGqX -->
The navbar is above the image
您可以将 position:fixed 与其 position(x and y axis)、width 和 z-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 here