我正在尝试为移动用户创建一个响应式导航栏。基本上,我希望导航栏中的列表隐藏在小屏幕上,列表将隐藏在汉堡菜单中。
当汉堡菜单出现在小屏幕上时,我想把菜单列表放在里面,但我在寻找答案时遇到了问题。
这是我的HTML
<div class="top">
<div class = "center">
<h><a href="home.html">J[a]son</a></h>
<p>Personal Blog</p>
</div>
<nav class = "top_child">
<div class = "logos">
<a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
<a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
<a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
</div>
<div class = "nav" id="myTopnav">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="">PHOTOGRAPHY</a>
<ul class="photography_1">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li><a href="coding.html">CODING</a></li>
<li><a href="about.html">ABOUT</a></li>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</ul>
</div>
</nav>
</div>
这是我的CSS
.top {
margin: auto;
/*padding: 0.5em;*/
padding-top: 0.5em;
padding-right: 0.5em;
padding-left: 0.5em;
background-color: black;
top: 0;
display: block;
position: sticky;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
z-index: 100;
clear: both;
}
.top p {
color: white;
font-size: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.center {
text-align: center;
}
.center a{
color: rgb(224, 224, 228);
font-size: 1.5em;
}
.center a:hover{
text-decoration: none;
color: rgb(224, 224, 228);
}
.nav {
float: right;
position: relative;
list-style: none;
display: block;
}
.nav a {
color: white;
}
.nav li {
display: inline;
list-style: none;
position: relative;
overflow: hidden;
}
.nav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.nav a:not(:first-child) {display: none;}
.nav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.nav.responsive {position:relative;}
.nav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.nav.responsive a {
float: none;
display: block;
text-align: left;
}
}
这是我的JavaScript
function myFunction() {
var x = document.getElementById("mynav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className = "nav";
}
}
发布于 2020-11-30 15:02:48
在您的Javascript代码片段中,您抓取了错误的ID。您的导航上的ID是id="myTopNav"
。在JS中,您获取的是id 'mynav'
。
https://stackoverflow.com/questions/65072946
复制相似问题