javascript - 无法让导航菜单 slideToggle 工作

Question

我对网页设计中的 javascript 还很陌生，即使经过大量研究也似乎无法弄清楚如何正确地让我的导航菜单滑动切换并将其下方的内容上下推送.理想情况下，如果我能在让菜单显示得与其下方的容器一样宽方面得到一些帮助，那么事情看起来会很棒。

我在 jsfiddle 中没有 slideToggle 代码，但这是我尝试过的事情之一:

$("#menu-button").click(function() {
    $("a").slideToggle(1000);
});

这是我的代码当前设置的 fiddle :https://jsfiddle.net/3uag19p1/18/

Answer 1

我为您更新了 html 的结构。您需要将 #menu-button 放在外面以确保它始终可见

<a id="menu-button" href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
        <nav class="site-navigation" id="myTopnav">
          <a href="#home">Home</a>
          <a href="#business">Business</a>
          <a href="#background">Background</a>
          <a href="#info">Info</a>
          <a href="#login">Login</a>

        </nav>

对于slidetoggle and push the content below it below的问题，你只需使用position: absolute。不要为 .site-navigation a 添加位置。这样会导致位置出错。

.site-navigation {
    position: absolute;
   right: -100px;
   top: 100px;
   transition: all 0.3s;

    width: 100px;
}

.site-navigation.responsive {
  right: 51px;
}

使用overflow-x: hidden 隐藏菜单以确保我们没有滚动来查看这个菜单

#page {
    height: 100%;
    background-color: #1c222b;
  overflow-x: hidden;
}

我添加了动画以使其顺利进行

这是 fiddle