时间戳

首页 > 解决方案 > 导航栏按钮折叠到侧边栏

html - 导航栏按钮折叠到侧边栏

问题描述

有没有办法在导航栏的折叠按钮上实现侧栏？

当我缩小屏幕时，我会在导航栏上看到折叠按钮，上面有所有按钮。

当我单击该折叠按钮时，它会展开导航栏并显示按钮。有没有办法代替这个展开按钮，而是在右侧或错误侧显示一个侧栏，占据整个屏幕并显示导航按钮？

演示

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

标签： htmlcsstwitter-bootstrapbootstrap-4sidebar

解决方案

在您的文件中添加以下css

@media only screen and (max-width: 767px) {
#collapsibleNavbar {position: fixed;top: 0;left: -100%;bottom: 0;display: block;max-width: 320px;width: calc(100% - 80px);min-height: 100%;z-index: 999;transition: all 0.3s ease;background: #000000;}
#collapsibleNavbar.show {left: 0;}
}

推荐阅读