使边栏在移动设备上可折叠

问题描述

我有一排两列。左列的边栏堆叠在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;
    }
  }
}

解决方法

也许是这样吗？

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

这是自定义的Bootstrap菜单