Question

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

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

这可能会对你有所帮助

 <a id="left-menu" href="#left-menu">Left Menu</a>
    <a id="right-menu" href="#right-menu">Right Menu</a>
    <script>
    $(document).ready(function() {
    $('#left-menu').sidr({
    name: 'sidr-left',
    side: 'left' // By default
    });
    $('#right-menu').sidr({
    name: 'sidr-right',
    side: 'right'
    });
    });
    </script>

side menu for more details

Answer 2

“slide”不是显示/隐藏的有效参数。

相反，您可以使用动画。

$(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 */
}

JS中的侧边菜单

2 个答案:

demo