Question

我一直在尝试在菜单中创建一个向右滑动的权限，当它滑动时也会推动画布的内容。我怎么能这样做？

这是代码。它在移动设备上从右向左滑动菜单，但我无法弄清楚如何使其推送内容，而不是错误。

@media (max-width: 768px) {
  .navbar-collapse {
    position: absolute;
    top: 54px;
    left: 1%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 100%;
    transition: all 0.3s ease-in;
  }
  .navbar-collapse.collapsing {
    height: auto !important;
    transition: all 0.2s ease;
    left: 100%;
  }
  .navbar-collapse.show {
    left: 50%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="">Brand</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
  	<span class="navbar-toggler-icon"></span>
  	</button>
  <div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline mt-2 mt-md-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec tempor dolor, ut varius magna. Cras a dui vitae massa interdum varius. Donec sit amet risus ullamcorper, congue purus nec, vulputate nunc. Integer cursus molestie metus, sit amet rutrum
  est feugiat vel. Praesent congue turpis a ullamcorper mattis. In commodo, mi convallis tristique vestibulum, massa lacus efficitur tortor, accumsan vehicula nunc ipsum id metus. Aenean vulputate nulla aliquet diam auctor, in tristique augue efficitur.
  Cras accumsan est nisi, vitae consectetur eros egestas ac. Vestibulum id imperdiet odio, in pellentesque nunc. Duis nunc lorem, sollicitudin nec mauris a, consequat posuere tellus. Nam in lobortis arcu. Suspendisse sodales aliquet tempus. Nam ut libero
  iaculis risus laoreet tincidunt. Pellentesque sodales nibh sit amet tincidunt auctor.</p>

<p>Nulla vulputate scelerisque felis, non varius tortor luctus ut. Phasellus quis feugiat est. In eleifend consequat ex in cursus. Quisque sodales dolor vel maximus ullamcorper. Cras mollis turpis ut risus accumsan, ac ornare quam elementum. Curabitur faucibus
  nulla sed mi blandit, et ultrices sem porttitor. Proin quis malesuada turpis, quis cursus nisl. Morbi auctor ante ut efficitur imperdiet.</p>

修改如果其他人需要这个，我最终使用以下jQuery：

<script>
    $('button-class').on('click', function() {
      $(this).children().toggleClass('active');
      $('#sidebar').toggleClass('active');
      $('#content').toggleClass('active-content');
    });
    </script>

刚刚添加了活动类，比如

#sidebar.active {
  //styles here
}

#content.active-content {
  //styles here
}

Answer 1

我建议您查看 link ，因为有很多替代方法可供使用。

在这里你可以看到它在JS中使用了这个函数

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

在这种情况下，由于您是从右到左进行的，因此可以使用style.marginRight。此外，您可以根据您设置的内容调整宽度像素。希望这会有所帮助。

如何制作一个make Bootstrap 4幻灯片菜单推送内容offcanvas？

1 个答案: