javascript - JS 中的侧边菜单

Question

我正在尝试制作侧面菜单，但并不完美。看一看：

JSFiddle

HTML

<div id="content-button">
    <div id="open-menu">Click</div>
</div>

<div id="content">
    <nav id="side-menu">
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li>Link</li>
        </ul>
    </nav>
</div>

Javascript

$(function() {
    $("#open-menu").click(function() {
        var $cache = $("#side-menu");
      if($cache.is(":visible"))
      {
        $cache.hide("slide", {direction:"left"}, 250);
      }
      else
      {
        $cache.show("slide", {direction:"left"}, 250);
      }
    });
});

CSS

#content-button {
    width: 100%;
    height: 100px;
}

#open-menu {
    width: 50px;
    height: 50px;
}

#side-menu {
    position: relative;
    left: 0;
}

当我点击“点击”时，侧边菜单出现在我的屏幕左侧，但是：

• 它突然出现，没有幻灯片效果
• 它出现在 div "content" 的顶部并推送所有内容。我希望它出现在左侧并将整个内容推到右侧
• 当我第二次单击“单击”时它不会消失

我希望你能理解我的问题。我无法在 JsFiddle 上向您展示，它不起作用，而且我在本地，但如果需要，我可以做一些截​​图。

Answer 1

“幻灯片”不是显示/隐藏的有效参数。

相反，您可以使用动画。

$(function() {
  $("#open-menu").click(function() {
    var $cache = $("#side-menu");
    if($cache.position().left === 0)
    {
      $cache.animate({
        left: -300
      }).then(function(){
        $cache.hide();
      });
    }
    else
    {
      $cache.show();
      $cache.animate({
        left: 0
      });
    }
  });
});

确保您的菜单相对定位。

#side-menu {
  position: relative;
  /* left: -300px */ /* uncomment to default hidden */
}

演示