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

Question

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

我的offcanvas菜单，点击一个按钮，主页面向左推，从左边进入slide。

我想实现这个：

once the button is clicked the main page SHOULD NOT MOVE, the offcanvas should slide from left (as it is now) BUT, instead of pushing it, overlap the main page...

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

Answer 1

我评论了第 155 行：

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

第 187 行：

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

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

通过尝试成功了！

Answer 2

听起来您使用的是 "push" 而不是 "slide" 选项。使用 class "offcanvas" 它应该可以工作。查看这些示例： http://www.jasny.net/bootstrap/examples/navmenu/

我想要所有视图的滑入式，所以我只使用了 "offcanvas" class，而不是您在滑入式源代码中看到的 "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>

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

Jasny Bootstrap - offcanvas avoid push of the main page: how to force menu to overlap?

javascript

jquery

twitter-bootstrap

prestashop

jasny-bootstrap