Question

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

我在此codepen中使用SASS和PUG，以下是已编译的版本：

＆＃13;

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

＆＃13;

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%;
  }
}

＆＃13;

<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>

＆＃13;

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');
  });
});

原始CodePen的

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

移动导航菜单不起作用

1 个答案: