Jasny Bootstrap - offcanvas 避免推送主页：如何强制菜单重叠？答案

【问题标题】：Jasny Bootstrap - offcanvas avoid push of the main page: how to force menu to overlap?Jasny Bootstrap - offcanvas 避免推送主页：如何强制菜单重叠？
【发布时间】：2016-03-25 14:37:59
【问题描述】：

我在 Prestashop 上使用 Jasny Bootstrap 的 offcanvas.js。

我的画布菜单，一旦点击一个按钮，左边的主页就会被推入，从左边进入幻灯片。

我想实现这个：

单击主页按钮后不应移动， offcanvas 应该从左侧滑动（就像现在一样）但是，而不是推动它，重叠主页...

我应该更改 offcanvas.js 的哪一部分？

【问题讨论】：

标签： javascript jquery twitter-bootstrap prestashop jasny-bootstrap

【解决方案1】：

听起来您使用的是“推送”而不是“滑动”选项。使用“offcanvas”类，它应该可以工作。看看这些例子： http://www.jasny.net/bootstrap/examples/navmenu/

我想要所有视图的滑入，所以我只是使用了“offcanvas”类，而不是您在滑入示例的源代码中看到的“offcanvas-sm”：

    <div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
  <a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
  <ul class="nav navmenu-nav">
    <li class="active"><a href="./">Slide in</a></li>
    <li><a href="../navmenu-push/">Push</a></li>
    <li><a href="../navmenu-reveal/">Reveal</a></li>
    <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
  </ul>
  <ul class="nav navmenu-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu navmenu-nav">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</div>

<div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Project name</a>
</div>

【讨论】：

【解决方案2】：

我评论了第 155 行：

//$('body').css(prop, padding)

第 187 行：

//$(this).css(placement, 0)

并将所有canvas-sliding 替换为no-sliding 类...

通过尝试成功了！

【讨论】：