swiper - gleitfähigen Menü voller Breite

Question

Ich möchte swiper slide menu in meinem Projekt mit Bootstrap gebaut verwenden 4. Ich habe eine Navigation, die so aussieht, wo die Menü-Taste auf der rechten Seite auf kleinen Bildschirmen platziert ist:

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

Jetzt funktioniert es wie in der Demo angezeigt here, aber ich möchte, dass das Menü die volle Breite nehmen, und die Menüschaltfläche in der rechten Ecke sichtbar sein, wenn das Menü geöffnet ist. Wenn ich für das Menü einige der CSS-Eigenschaften auf Kommentar:

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

Dann ist das Menü voller Breite, aber die Menütaste nicht sichtbar ist, habe ich versucht, mit dem großen z-index, um es zu geben, aber das hat nicht geholfen. Was muss ich tun, um es sichtbar zu machen?

Answer 1

Vorbehalt: Ich habe diese Änderungen an dem Code in der Demo vorgenommen, die Sie verknüpft haben. Ich habe nicht mit dem HTML-Code gespielt, den Sie hier eingefügt haben.

Sie waren auf dem richtigen Weg. Entfernen Sie die width und max-width wie Sie bereits getan haben.

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

Dann fügen Sie die folgenden css den Button oben rechts zu bewegen, wenn Sie das Menü erweitern:

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

Wenn Sie ein volles Breite Menü und die Taste auf der oben rechts auf nur wollen auf kleinen Bildschirmen anwenden müssen Sie eine Medienabfrage verwenden. Ändern Sie den folgenden Code wie erforderlich.

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