Question

我的汉堡div没有显示导航菜单。

我已尝试通过更改JS中的功能及其操作方式来解决此问题，但是当您将页面尺寸减小到812px或更小（媒体查询）时，菜单仍然不显示。

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

@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

//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');
      }
    }
  }
}

控制台中未显示任何错误。

将汉堡更改为X图标的myFunction（）仍然有效-toggleDropdown（）无效。

谢谢！

Answer 1

1- <div class="aw-container">标签未关闭。 2添加班级表演。 3- document.getElementByID始终返回参数，因此您不能使用for循环。

Answer 2

我认为您忘记了CSS代码中的show类

.show ul.aw-navigation{
visibility: visible;

}

这是我尝试过的密码笔

https://codepen.io/sarang13579/pen/MMPmyx

通过谷歌搜索，您可以在w3schools或Codepen上找到更具吸引力的导航标签汉堡菜单实现

我的汉堡图标未显示导航菜单

2 个答案: