单击折叠的导航栏图标时，如何创建从右侧打开的面板？

Question

我一直在尝试从现有网站复制一些设计。单击折叠的导航栏时如何实现从右侧打开的面板？

这就是我想要实现的目标。 Target Navbar

我正在使用 Bootstrap 4，我已经尝试了很多，弄乱了对齐和填充，但没有办法实现这一点。请注意，当导航栏未折叠（较小的视口）时，我不需要右侧面板。有什么建议吗？

这是我当前的导航栏 HTML 代码

<nav class="navscroll navbar navbar-expand-sm bg-transparent navbar-dark fixed-top wow">

  <a class="navbar-brand d-sm-none d-md-block d-none d-sm-block" href="#">
    <img src="img/vamoslogo2.png" width="170" height=auto alt="">
  </a>
  <button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarCollapse">
               <span class="navbar-toggler-icon"></span>
           </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a href="#home" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">Work</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">Contact Us</a>
      </li>
      <li class="nav-item">
        <a href="" class="nav-link">About</a>
      </li>

      <li class="nav-item">
          <a href="" class="nav-link">Blog </a>
        </li>
    </ul>
  </div>

我尝试添加另一个类 (.sidenav) 所以它变成了

<div class="collapse navbar-collapse sidenav" id="navbarCollapse">

并给了.sidenav下面的CSS

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

正如 w3schools 上的帖子所建议的那样。但是，这样做时，我的所有导航栏元素都不可见，并且折叠的导航栏不起作用。

Answer 1

当点击折叠的导航栏时，Bootstrap 可能会更改导航栏元素上的一些类名。在检查器中检查这一点。尝试了解会发生什么，然后编写 CSS 来推翻引导程序所做的事情。 我不知道 bootstrap 添加了哪些类，但我们假设它添加了一个“collapsed”类，那么您可以编写类似这样的内容并添加过渡和其他样式。

.sidenav {
    position: absolute;
    right: 0;
    left: auto;
}
.collapsed .sidenav {
    left:100vw;
    right:auto;
}