Question

我在Prestashop上使用 offnyvas.js Jasny Bootstrap 。

我的offcanvas菜单，点击一个按钮后，按下左侧的主页面并从左侧进入幻灯片。

我想实现这个目标：

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

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

Answer 1

听起来你正在使用＆＃34; push＆＃34;而不是＆＃34; slide＆＃34;选项。使用课堂＆＃34; offcanvas＆＃34;它应该工作。看看这些例子： http://www.jasny.net/bootstrap/examples/navmenu/

我想要所有视图的幻灯片，所以我只是使用＆＃34; offcanvas＆＃34;上课，而不是＆＃34; offcanvas-sm＆＃34;您可以在幻灯片示例的源代码中看到：

    <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

我评论了第155行：

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

第187行：

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

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

它通过尝试起作用了！

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

2 个答案: