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

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

1 个答案: