移动导航菜单不起作用

Question

当我点击#navicon-1 元素时，我似乎无法让nav ul 向下滑动。

我在这个codepen 中使用了 SASS 和 PUG，下面是 编译的 版本：

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        $(this).toggleClass('open');
    });
});

nav {
  width: 100%;
  background: blue;
}
nav ul {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
nav ul li {
  display: inline-block;
  padding: 40px;
  transition: 0.5s;
}
nav ul li:hover {
  background: black;
}
nav ul li a {
  text-decoration: none;
  color: white;
}

@media only screen and (min-width: 360px) and (max-width: 767px) {
  #nav-icon1 {
    right: 0;
    width: 60px;
    height: 45px;
    position: absolute;
    margin: 10px 10px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transitions: 0.5s ease-in-out;
    -moz-transitions: 0.5s ease-in-out;
    -o-transform: 0.5s ease-in-out;
    transform: 0.5s ease-in-out;
    cursor: pointer;
  }
  #nav-icon1 span {
    display: block;
    position: absolute;
    height: 9px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    background: black;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transitions: 0.25s ease-in-out;
    -moz-transitions: 0.25s ease-in-out;
    -o-transitions: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  #nav-icon1 span:nth-child(1) {
    top: 0px;
  }
  #nav-icon1 span:nth-child(2) {
    top: 18px;
  }
  #nav-icon1 span:nth-child(3) {
    top: 18px;
  }
  #nav-icon1 span:nth-child(4) {
    top: 36px;
  }

  #nav-icon1.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  #nav-icon1.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #nav-icon1.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #nav-icon1.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div id="nav-icon1"><span></span><span></span><span></span><span></span></div>
  <ul>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>
  </ul>
</nav>

Answer 1

这里缺少一些东西。首先，要显示/隐藏元素，您需要从显示/隐藏开始。我假设您想隐藏360px 和767px 之间的菜单，如您在媒体查询中看到的那样，如果您想让它滑动，它需要向上！将 .nav 类添加到 UL 可以更轻松地使用以下 SASS 进行定位：

.nav
  position: absolute
  top: -100%
  transition: top 500ms
  &.open
    top: 0

您可以在此处看到，添加 .open 类会将菜单从顶部向下滑动，而 transition 属性会将其动画化超过 500 毫秒。

您还需要将显示/隐藏此菜单的按钮移到此菜单的包装之外，否则它也将被隐藏。您可以在下面的 PUG 代码中看到它是如何工作的，并添加了上面的 .nav 类：

#nav-icon1
  span
  span
  span
  span
nav#nav-menu.nav
  ul
    li
      a(href="#") Lorem
    li
      a(href="#") Lorem
    li
      a(href="#") Lorem
    li
      a(href="#") Lorem

最后，您的 JavaScript 必须在按钮 和 要显示/隐藏的菜单上切换 .open 类。这就是我添加上面的#nav-menu ID 的原因。这是一个使用 jQuery 的示例：

$(document).ready(function(){

  $navMenu = $('#nav-menu');

  $('#nav-icon1').click(function(){
    $(this).add($navMenu).toggleClass('open');
  });
});

Here's a fork 您原来的 CodePen，请查看我的更改并考虑如何在您自己的项目中实现它们！