Jasny Bootstrap-使用canvas避免按下主页：如何强制菜单重叠？

Question

I'm using the offcanvas.js by Jasny Bootstrap on Prestashop.

My offcanvas menu, once a button is clicked, pushes the main page on the left and enters in slide from the left.

I would like to achieve this:

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...

Which part of the offcanvas.js should I change?

Answer 1

It sounds like you're using the "push" instead of "slide" option. Use the class "offcanvas" and it should work. Check out these examples: http://www.jasny.net/bootstrap/examples/navmenu/

I wanted the slide-in for all views, so I simply used the "offcanvas" class, rather than the "offcanvas-sm" you see in the source code for the slide-in example:

    <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>

Answer 2

I commented the line 155:

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

And line 187:

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

and replaced all canvas-sliding with the class no-sliding ...

it worked by attempt!