[英]My burger icon is not displaying the navigation menu
My burger div is not showing the navigation menu. 我的汉堡div没有显示导航菜单。
I have tried to address the problem by changing functions in JS and the way I do them but still menu not displaying when you reduce the page size to 812px or less ( media queries). 我试图通过更改JS中的函数及其操作方式来解决此问题,但是当您将页面大小减小到812px或更小(媒体查询)时,菜单仍然不显示。
HTML 的HTML
<header>
<nav>
<div class="aw-container">
<a href="Home.html"><img class="logo" src="img/logo.jpg" width="60" height="50" alt="logo"></a>
<div id="nav-class" class="aw-burger-open">
<ul class="aw-navigation">
<li><a class="aw-section-home" href="#">Home</a></li>
<li><a class="aw-section-blog" href="#aw-blog">Blog</a></li>
<li><a class="aw-section-link" href="#aw-contact">Travel</a></li>
<li><a class="aw-section-newsletter" href="#aw-newsletter">Contact</a></li>
<li><a class="aw-section-study" href="#aw-study">Planning</a></li>
<li><a class="aw-section-search" href="aw-search">Search</a></li>
</ul>
</div>
<form class="searchbar" method="get">
<input type="text" id="s" placeholder="Search" name="search">
<div class=" close-icon">
<button type="button"><i class="fa fa-close"></i></button>
</div>
</form>
<div id = "burger-menu" class="burger" onclick="myFunction(this);toggleDropdown(this);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>
CSS 的CSS
@media screen and (max-width: 812px) {
ul.aw-navigation{
visibility: hidden;
}
#nav-class{
display: flex;
flex-direction: column;
}
/*Burger Menu */
.burger {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 20px;
height: 2px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 3px);
transform: rotate(-45deg) translate(-4px, 3px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}
JS JS
//Burger//
function myFunction(x) {
x.classList.toggle("change");
}
function toggleDropdown() {
document.getElementById("nav-class").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.burger')) {
var dropdowns = document.getElementById("nav-class");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
No error is displayed in the console. 控制台中未显示任何错误。
myFunction() which changes the burger to X icon still working - toggleDropdown() doesn't. 将汉堡更改为X图标的myFunction()仍然有效-toggleDropdown()无效。
Thanks in advance! 提前致谢!
1- <div class="aw-container">
tag not closed. 1-
<div class="aw-container">
标记未关闭。 2-add class show. 2添加班级表演。 3- document.getElementByID always return a param so you can not use for loop.
3- document.getElementByID始终返回一个参数,因此您不能使用for循环。
I think you forgot the show class in CSS code 我认为您忘记了CSS代码中的show类
.show ul.aw-navigation{
visibility: visible;
} }
Here is the code pen I tried 这是我尝试过的代码笔
https://codepen.io/sarang13579/pen/MMPmyx https://codepen.io/sarang13579/pen/MMPmyx
You can find more attractive nav tag hamburger menu implementation on w3schools or codepen by just googling 在w3schools或Codepen上,您可以通过谷歌搜索找到更有吸引力的nav标签汉堡菜单实现
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.