[英]Lists in navigation bar would not hide itself when responsive hamburger menu appears in small screen
I'm trying to create a responsive navigation bar for mobile users.我正在尝试为移动用户创建一个响应式导航栏。 Basically, I want the lists in the navigation bar to hide itself in small screen and the lists will be hidden inside hamburger menu.基本上,我希望导航栏中的列表隐藏在小屏幕中,并且列表将隐藏在汉堡菜单中。
When hamburger menu shows up in small screen, I want the menu lists to go inside it, but I'm having issue of finding the answer..当汉堡菜单出现在小屏幕上时,我希望菜单列表包含在其中的 go 中,但我遇到了寻找答案的问题。
Here is my HTML这是我的 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>
Here is my CSS这是我的 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;
}
}
Here is my JavaScript这是我的 JavaScript
function myFunction() {
var x = document.getElementById("mynav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className = "nav";
}
}
In your Javascript snippet you are grabbing the wrong ID.在您的 Javascript 代码段中,您获取了错误的 ID。 The ID on your nav is id="myTopNav"
.您导航上的 ID 是id="myTopNav"
。 In the JS you are grabbing the id 'mynav'
.在 JS 中,您正在获取 id 'mynav'
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.