菜单转换

时间:2017-08-04 13:45:38

标签: javascript html css transition

我正在尝试重建不会复制并粘贴此网站http://paramoredigital.com/仅用于学习方向。我有菜单转换问题,更准确地说如果你点击右上方按钮菜单会顺利显示,我不知道如何在我的代码中进行。

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

1 个答案:

答案 0 :(得分:0)

单击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>
&#13;
&#13;
&#13;