我目前正在从事一个项目，并且有一个可响应的粘性响应导航栏，我想将其变成一个粘性移动导航菜单。我看过其他类似的帖子，但是它们要么不起作用，要么正在使用其他类型的导航栏。抱歉，以前是否有人问过。任何帮助表示赞赏！
编辑：我希望导航栏看起来像一个here
* { box-sizing: border-box; }
body { background-color: #31353a;
color: #000033;
word-wrap: break-word;
font-family: Arial, Tahoma, "Sans Serif";
min-height: 100vh; }
header { background-color: #31353a;
text-align: center;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
text-shadow: 2px 2px 4px black;
box-shadow: 0 0 25px 0 black; }
header a { text-decoration: none;
transition: color 3s ease-out; }
header a:link { color: white; }
header a:visited { color: white; }
header a:hover { color: #00bfff;
text-shadow: 2px 2px 4px black, 0 0 25px black, 0 0 5px blue; }
h1 { margin-bottom: 0;
margin-top: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 3em;
letter-spacing: 0.25em;
text-align: center; }
h2 { color: #1e20ff;
font-family: Georgia, "Times New Roman", serif;
text-shadow: 1px 1px 1px #777777; }
h3 { color: #000033;
font-family: Georgia, "Times New Roman", serif; }
h4 { color: #000033;
font-family: Georgia, "Times New Roman", serif;
border: 1px solid #000033;
box-shadow: 0 0 5px 0 #000033;
text-align: center;
font-size: 14px; }
h5 { color: white;
font-family: Georgia, "Times New Roman", serif;
font-style: body;
font-size: 14px; }
main { padding-top: 1px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
display: block;
min-height: 100vh;
overflow: auto; }
main ul { list-style-image: url(images/marker.png); }
section { padding-left: 2em;
padding-right: 2em; }
.wrapper { margin: 0px auto;
overflow: auto; }
.footer_1 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_1 a { color: white;
text-decoration: none; }
.footer_2 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_2 a { color: white;
text-decoration: none; }
.footer_2 a:link { color: white;
text-decoration: none; }
.footer_2 a:hover { color: #ff7f00;
text-decoration: none; }
footer { text-align: center;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
padding: 20px;
border-bottom-left-radius: 29px;
border-bottom-right-radius: 29px;
color: white;
background-color: #31353a; }
img { border-radius: 30px;
border: 1px solid #000033;
box-shadow: 0 0 25px 0 black;
height: 250px;
width: 100%; }
a { color: #0080ff; }
a:link { color: #0080ff;
text-decoration: none; }
a:visited { color: #ff7f00; }
a:active { color: #ff7f00; }
a:hover { color: #ff7f00; }
#logo { background-image: url(images/logo.png);
background-repeat: no-repeat;
background-size: 200px 200px;
display: block;
margin: 0 auto;
text-indent: -9999px;
background-position: left;
padding-bottom: 40px;
margin-left: 10px; }
#wrapper { min-height: 100vh; background: linear-gradient(to bottom, #b7deed 21%,#21b4e2 100%,#b7deed 100%);
margin: auto;
max-width: 90%;
box-shadow: 1px 1px 1px black;
border: 1px solid;
border-color: #000033;
border-radius: 30px; }
#home { height: 250px;
width: 100%;
background-image: url(images/home.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
#games { height: 250px;
width: 100%;
background-image: url(images/gaming.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
ul.topnav { list-style-type: none;
margin: 0;
padding: 0;
background-color: #31353a;
position: sticky;
top: 0;
width: 100%;
overflow: hidden; }
ul.topnav li { float: left; }
ul.topnav li a { display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; }
ul.topnav li a:hover:not(.active) { background-color: black;
color: white; }
ul.topnav li a.active { background-color: #00bfff;
color: white; }
ul.topnav li.right { float: right;
color: white; }
.topnav li { border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: none;
border-top: none;
margin-left: -0.5px;
margin-right: -0.5px; }
form { display: flex;
flex-flow: column nowrap; }
input, textarea { margin-bottom: .5em; }
@media screen and (max-width: 800px) {
#logo { background-position: left; }
section { grid-row: 1 / 5;
grid-column: auto; }
ul.topnav li.right,
ul.topnav li { float: none; }
.topnav li { border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: none;
border-right: none;
margin-bottom: -0.5px;
margin-top: -0.5px; }
form { display: grid;
grid-gap: 0.6em; gap: 0.6em; }
}
@media screen and (min-width: 801px) {
section { grid-row: 1 / 5;
grid-column: auto; }
form { width: 80%;
display: grid;
grid-gap: 0.6em; gap: 0.6em;
grid-template-columns: 6em 0.8fr;
grid-template-rows: auto; }
input[type="submit"] { grid-column: 2 / 3; width: 6em; }
input[type="reset"] { grid-column: 4 / 5; width: 6em; }
}<!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">
<link href="gamingparadise.css" rel="stylesheet">
<title>GamingParadise :: Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><a href="index.html" id="logo">GamingParadise</a></h1>
</header>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="emulators.html">Emulators</a></li>
<li class="right"><a href="request.html">Request</a></li>
</ul>
<div id="home">
</div>
<main>
<h2>Welcome to GamingParadise!</h2>
<p>We at GamingParadise would like to welcome you and thank you for stopping by! Our goals are to provide you with access to games and emulators for many different systems. To achieve this, we will be proving working links to our contents and their requirements. We do daily checks to see if any links are broken, but if by chance we missed one, please don't hesitate to contact us! We thrive to live up to our motto the best we can which is, "A Happy Customer is a Happy Worker".</p>
</main>
<footer>
<div class="wrapper">
<div class="footer_1">
<h5><u>Home</u></h5>
<a class="logo" href="index.html">GamingParadise<br>
<i>© 2020</i></a>
</div>
<div class="footer_2">
<h5><u>Contact</u></h5>
<a href="mailto:acrouse@student.centralgatech.edu">Email</a><br>
<a href="http://m.me/narutoshire">Facebook</a><br>
(424) 264-4887
</div>
</div>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
这是您可以根据需要重构和完善的一些代码。 javascript仅用于设置显示属性
let button = document.getElementById('dropdown'); /*button*/
var navi = document.getElementsByClassName("topnav");
let i = 0;
button.onclick = function(){
i = i+1;
if(i%2 != 0) {
//drop down
navi[0].style.display = "block"
}else {
//up
navi[0].style.display = "none"
}
};h1 { margin-bottom: 0;
margin-top: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: 3em;
letter-spacing: 0.25em;
text-align: center; }
h2 { color: #1e20ff;
font-family: Georgia, "Times New Roman", serif;
text-shadow: 1px 1px 1px #777777; }
h3 { color: #000033;
font-family: Georgia, "Times New Roman", serif; }
h4 { color: #000033;
font-family: Georgia, "Times New Roman", serif;
border: 1px solid #000033;
box-shadow: 0 0 5px 0 #000033;
text-align: center;
font-size: 14px; }
h5 { color: white;
font-family: Georgia, "Times New Roman", serif;
font-style: body;
font-size: 14px; }
main { padding-top: 1px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
display: block;
min-height: 100vh;
overflow: auto; }
main ul { list-style-image: url(images/marker.png); }
section { padding-left: 2em;
padding-right: 2em; }
.wrapper { margin: 0px auto;
overflow: auto; }
.footer_1 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_1 a { color: white;
text-decoration: none; }
.footer_2 { display: inline-block;
vertical-align: middle;
height: 150px;
width: 300px; }
.footer_2 a { color: white;
text-decoration: none; }
.footer_2 a:link { color: white;
text-decoration: none; }
.footer_2 a:hover { color: #ff7f00;
text-decoration: none; }
footer { text-align: center;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;
font-size: 12px;
padding: 20px;
border-bottom-left-radius: 29px;
border-bottom-right-radius: 29px;
color: white;
background-color: #31353a; }
img { border-radius: 30px;
border: 1px solid #000033;
box-shadow: 0 0 25px 0 black;
height: 250px;
width: 100%; }
a { color: #0080ff; }
a:link { color: #0080ff;
text-decoration: none; }
a:visited { color: #ff7f00; }
a:active { color: #ff7f00; }
a:hover { color: #ff7f00; }
#logo { background-image: url(images/logo.png);
background-repeat: no-repeat;
background-size: 200px 200px;
display: block;
margin: 0 auto;
text-indent: -9999px;
background-position: left;
padding-bottom: 40px;
margin-left: 10px; }
#wrapper { min-height: 100vh; background: linear-gradient(to bottom, #b7deed 21%,#21b4e2 100%,#b7deed 100%);
margin: auto;
max-width: 90%;
box-shadow: 1px 1px 1px black;
border: 1px solid;
border-color: #000033;
border-radius: 30px; }
#home { height: 250px;
width: 100%;
background-image: url(images/home.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
#games { height: 250px;
width: 100%;
background-image: url(images/gaming.jpg);
background-size: 100% 100%;
background-repeat: no-repeat }
ul.topnav { list-style-type: none;
margin: 0;
padding: 0;
background-color: #31353a;
position: sticky;
top: 0;
width: 100%;
overflow: hidden; }
ul.topnav li { float: left; }
ul.topnav li a { display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none; }
ul.topnav li a:hover:not(.active) { background-color: black;
color: white; }
ul.topnav li a.active { background-color: #00bfff;
color: white; }
ul.topnav li.right { float: right;
color: white; }
.topnav li { border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: none;
border-top: none;
margin-left: -0.5px;
margin-right: -0.5px; }
form { display: flex;
flex-flow: column nowrap; }
input, textarea { margin-bottom: .5em; }
@media screen and (max-width: 800px) {
#logo { background-position: left; }
section { grid-row: 1 / 5;
grid-column: auto; }
ul.topnav li.right,
ul.topnav li { float: none; }
.topnav li { border-bottom: 1px solid black;
border-top: 1px solid black;
border-left: none;
border-right: none;
margin-bottom: -0.5px;
margin-top: -0.5px; }
form { display: grid;
grid-gap: 0.6em; gap: 0.6em; }
}
body {
background-color: blue;
}
.topnav {
display: none;
}
@media screen and (min-width: 801px) {
#dropdown {
display: none;
}
section { grid-row: 1 / 5;
grid-column: auto; }
form { width: 80%;
display: grid;
grid-gap: 0.6em; gap: 0.6em;
grid-template-columns: 6em 0.8fr;
grid-template-rows: auto; }
input[type="submit"] { grid-column: 2 / 3; width: 6em; }
input[type="reset"] { grid-column: 4 / 5; width: 6em; }
body {
background-color: red;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="master.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="gamingparadise.css" rel="stylesheet">
<title>GamingParadise :: Home</title>
</head>
<body>
<button id="dropdown">DropDown</button>
<div id="wrapper">
<header>
<h1><a href="index.html" id="logo">GamingParadise</a></h1>
</header>
<ul class="topnav">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="emulators.html">Emulators</a></li>
<li class="right"><a href="request.html">Request</a></li>
</ul>
<div id="home">
</div>
<main>
<h2>Welcome to GamingParadise!</h2>
<p>We at GamingParadise would like to welcome you and thank you for stopping by! Our goals are to provide you with access to games and emulators for many different systems. To achieve this, we will be proving working links to our contents and their requirements. We do daily checks to see if any links are broken, but if by chance we missed one, please don't hesitate to contact us! We thrive to live up to our motto the best we can which is, "A Happy Customer is a Happy Worker".</p>
</main>
<footer>
<div class="wrapper">
<div class="footer_1">
<h5><u>Home</u></h5>
<a class="logo" href="index.html">GamingParadise<br>
<i>© 2020</i></a>
</div>
<div class="footer_2">
<h5><u>Contact</u></h5>
<a href="mailto:acrouse@student.centralgatech.edu">Email</a><br>
<a href="http://m.me/narutoshire">Facebook</a><br>
(424) 264-4887
</div>
</div>
</footer>
</div>
</body>
</html>
<script src="javascript.js"></script>