所以，這是一個非常具體的問題：
- 我希望你運行代碼，并在一個完整的視窗中打開它。
- 現在請檢查以下代碼，并切換回應模式。
- 現在，將尺寸更改為較小的尺寸，直到您可以看到一個漢堡包。
- 現在點擊漢堡包。作業正常？
- 現在關閉漢堡包。
- 在此移動視圖中滾動到頁面末尾。
- 現在嘗試打開漢堡包。很可能它不會作業。
- 現在滾動到回應式移動視圖中頁面頂部的正下方。在這里打開漢堡包。您應該能夠看到像影像中包含的那樣出現故障的半選單。
我不知道為什么或如何發生這種情況。有人可以重新喜歡這個嗎？任何幫助將不勝感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
@media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
@media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<a href="index.html" class="logo">Nikita Gada</a>
<ul class="navlinks">
<li><a href="#">About Me</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Work</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>uj5u.com熱心網友回復：
我設定top : 80px你的navlinks在你的@media (max-width: 800px)，它似乎是作業。看一看。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
@media (max-width: 800px) {
.navlinks {
position: fixed;
/* line I added */
top:90px;;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
@media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<a href="index.html" class="logo">Nikita Gada</a>
<ul class="navlinks">
<li><a href="#">About Me</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Work</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>uj5u.com熱心網友回復：
那么，問題是你從來沒有定義top的屬性.navlinks。請檢查代碼段。
顯示代碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
@media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
top: 90px;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
@media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<a href="index.html" class="logo">Nikita Gada</a>
<ul class="navlinks">
<li><a href="#">About Me</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Work</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>uj5u.com熱心網友回復：
只需添加top: 90px;到@media (max-width: 800px) { .navlinks {top: 90px;}}
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
@font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
@media (max-width: 800px) {
.navlinks {
position: fixed;
top: 90px;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
@media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;800&family=Quicksand:wght@300&family=Roboto:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<a href="index.html" class="logo">Nikita Gada</a>
<ul class="navlinks">
<li><a href="#">About Me</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Work</a></li>
<li><a href="#" class="contact">Contact</a></li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>uj5u.com熱心網友回復：
請在 .navlink 類中添加 CSS 屬性。我在這個類中添加了“top:90px;”。當將位置固定到任何元素時，添加特定的兩個邊值，例如左和上、或上和右、或右和下、或左和下。
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
top: 90px;
background: #222831;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365491.html
上一篇：當瀏覽器標簽最小化或在標簽之間切換時需要停止計時器倒計時
下一篇：獲取固定高度div中文本的高度