JavaScript 响应式菜单答案

【问题标题】：JavaScript Responsive MenuJavaScript 响应式菜单
【发布时间】：2020-06-28 20:27:48
【问题描述】：

我有这个导航菜单，就像这里的image 一样。

下面是我的 JS，我目前必须使其具有响应性，以便在单击它时打开但它不起作用：

function showMenu(event) {

  event.preventDefault();

  let element = document.getElementById('header');

  if (element.classList.contains('active')) {
    element.className = "";
  } else {
    element.className = "active";
  }
}

header {
  padding: 0 !important;
  background: #fff;
}

header.active {
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);
}

header.fixed {
  padding: 0 0;
}

header button {
  position: absolute;
  top: 12px;
  right: 25px;
  display: block;
  width: 30px;
  height: 40px;
  padding-top: 6px;
  border: none;
  background: #fff;
}

header button span {
  position: relative;
  top: 0;
  display: block;
  width: 100%;
  height: 2.5px;
  margin-bottom: 5px;
  transition: all .2s ease;
  border-radius: 15px;
  background: #0d2366;
}

header button span:nth-child(2) {
  right: 0;
  width: 80%;
  opacity: 1;
}

header button span:nth-child(3) {
  width: 60%;
}

header.active button span:nth-child(1) {
  top: 8px;
  left: -4px;
  -ms-transform: rotate(38deg);
  transform: rotateZ(38deg);
}

header.active button span:nth-child(2) {
  right: -100%;
  opacity: 0;
}

header.active button span:nth-child(3) {
  top: -6px;
  left: -4px;
  width: 100px;
  -ms-transform: rotate(-38deg);
  transform: rotateZ(-38deg);
}

header ul.menu-left {
  display: none;
}

header img {
  margin-left: 25px !important;
}

header.active ul.menu-left {
  display: block;
  float: none;
  clear: both;
}

header.active ul.menu-left li {
  display: block !important;
  padding: 10px 20px;
}

header ul.menu-right {
  display: none;
}

<!--Header-->
<header id="header">
  <div class="wrapper">
    <a href="/">
      <img src="images/pulse.png" alt="logo">
    </a>

    <button id="submenu">
                <span></span>
                <span></span>
                <span></span>
            </button>


    <!--Menu Links-->
    <ul class="menu-left">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

    <ul class="menu-right">
      <li class="menu-cta"><a href="#">Get Started</a></li>
    </ul>
  </div>
</header>

这里的活动类代表响应式菜单图标。

非常感谢任何帮助。

谢谢！

【问题讨论】：

你在哪里调用你的showMenu函数？

标签： javascript html css responsive-design responsive

【解决方案1】：

通过使用addEventListener，您可以观看点击事件。单击按钮后，下面的第三行将在 id="header" 上添加和删除类 'active' 之间切换

document.getElementById("submenu").addEventListener("click", function(event) {
  event.preventDefault();
  document.getElementById("header").classList.toggle("active");
});

【讨论】：