在移动设备上制作可折叠的侧边栏

Question

我有一排两列。左侧栏有一个侧边栏，堆叠在右侧栏的顶部，位于 iPad 宽度的上方和下方。我希望它是可折叠的，在标题上显示活动链接，并在单击时显示下拉菜单。

我尝试了几种方法来实现这一点，但我无法让它发挥作用。

这是 HTML：

<div class="col-lg-3 customer-portal-base">
      <ul class="side-bar">
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Account</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Orders</a>
          </li>
          <li class="side-bar__item">
            <a href="#" class="side-bar__item-link">Order details</a>
        </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">My details</a>
          </li>
          <li class="side-bar__item side-bar__item--is-active">
              <a href="#" class="side-bar__item-link side-bar__item-link--is-active">Account settings</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Contact</a>
          </li>
          <li class="side-bar__item">
              <a href="#" class="side-bar__item-link">Logout</a>
          </li>
      </ul>
  </div>

这是 SCSS：

.side-bar {
  padding: 0;
  background-color: white;
  list-style: none;
  margin-top: 0;
  width: 97%;

  &__item {
    &-link {
      font-weight: lighter;
      transition: all 0.5s;

      &--is-active {
        color: blue;
        font-weight: 600;

        &::after {
          background-image: url("");
          content: "";
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center center;
          width: 1.8rem;
          height: 1rem;
          margin-left: 3rem;
          transform: translateY(0.2rem);

          @include sidebar-breakpoint {
            display: none;
          }
        }
      }

      &:hover, &:active {
        color: blue;
      }
    }
    cursor: pointer;
    padding: 1.1rem 0 1.1rem 1.5rem;
    border-bottom: solid 1px grey;
    font-size: 0.9rem;

    &:last-child {
      border-bottom: 0;
    }
  }
}

Answer 1

也许是这样的？

https://bootstrap-menu.com/demos/offcanvas-desktop.html

这是一个自定义的引导菜单