Question

我想在使用bootstrap 4构建的项目中使用swiper slide menu。我的导航看起来像这样，菜单按钮放在右侧的小屏幕上：

<div class="container">
  <nav class="navbar navbar-toggleable-sm navbar-light bg-faded">

      <div class="menu-button navbar-toggler navbar-toggler-right">
         <div class="bar"></div>
         <div class="bar"></div>
         <div class="bar"></div>
      </div>
      <a href="{{ url('/') }}" class="logo-link">
        <img src="{{ asset('/img/logo-small-new.png') }}" alt="logo">
      </a>
      <div class="navbar-collapse collapse justify-content-between" id="navbar5">
          <form action="/search" method="get" class="my-auto d-inline mx-auto col-md-8" role="search">
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">
                  <button type="submit" class="search-button">
                    <i class="ion-ios-search-strong"></i>
                  </button>
                </span>
                <input type="text" id="search-input" name="q" class="form-control aa-input-search" placeholder="Search for players and videos ..."  value="{{ Request::get('q') }}" aria-describedby="basic-addon1">
              </div>
          </form>
          <ul class="navbar-nav my-auto">
              @if (Auth::check())
              <li class="nav-item dropdown">
                  <a class="nav-link" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="ion-ios-gear-outline"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="{{ url('/home') }}">Admin dashboard</a>
                      <a class="dropdown-item" href="{{ url('/logout') }}"
                          onclick="event.preventDefault();
                                   document.getElementById('logout-form').submit();">
                          Log out
                      </a>
                      <form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
                          {{ csrf_field() }}
                      </form>
                  </div>
              </li>
              @else
              <li>
                <a href="{{ url('/login') }}" class="btn btn-outline-info">Sign in</a>
              </li>
              @endif
          </ul>
      </div>
  </nav>
</div>

现在它的效果与显示here的演示类似，但我希望菜单采用整个宽度，菜单打开时右下角会显示菜单按钮。如果我注释掉菜单的一些css属性：

.menu {
    min-width: 100px;
    /* width: 70%; */
    /* max-width: 320px; */
    background-color: #2C8DFB;
    color: #fff;
}

然后菜单是全宽的，但是菜单按钮不可见，我尝试给它提供大的z-index，但这没有帮助。我需要做些什么才能让它可见？

Answer 1

警告：我对您链接的演示中的代码进行了这些更改。我没有玩你在这里粘贴的HTML。

你走在正确的轨道上。像你一样删除width和max-width。

.menu {
    min-width: 100px;   
    background-color: #2C8DFB;
    color: #fff;
}

然后添加以下css以在展开菜单时将按钮移至右上角：

.menu-button.cross{
    left: -80px;
}

如果您想要一个全宽度菜单，并且右上角的按钮仅适用于小屏幕，则需要使用媒体查询。根据需要修改以下代码。

/*smaller screen css*/
.menu {
    min-width: 100px;   
    background-color: #2C8DFB;
    color: #fff;
}
.menu-button.cross{
    left: -80px;
}
media (min-width: 768px) {
    /*larger screen css*/
    .menu {
        width: 70%;
        max-width: 320px;
    }
    .menu-button.cross{
        left: 0;
    }
}

Swiper - 可滑动菜单全宽

1 个答案: