我有这个导航菜单，如图所示。

下面是我的JS，我目前必须使它响应，以便它打开点击它，但它没有工作:

null

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>

null

此处的活动类表示响应菜单图标。

任何帮助都非常感激。

谢啦！