javascript - 菜单转换

Question

我正在尝试重建而不是复制和粘贴此网站 http://paramoredigital.com/仅供学习方向。我在菜单转换方面遇到问题，更准确地说，如果您单击右上角的按钮，菜单会顺利显示，但我不知道如何在我的代码中执行此操作。

这是我的代码 https://github.com/Szuchow/paramore-digital .

Answer 1

单击 X 将出现菜单。剩下的就是样式问题。

$("body").on("click", function() {
  $(".menu").addClass("open");
})

body {
padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: lightblue;
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: pink;
  transition: opacity 1s ease;
  width: 100vw;
  height: 100vh;
}

.menu.open {
  opacity: 1;
}

.toggle a {
  font-size: 2em;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="toggle"><a href="#">X</a></span>
  <div class="menu">
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </div>
</div>