Erstellen Sie eine responsive navbar, sidebar "Schublade" in der Bootstrap-4?

Versuchen, etwas zu erreichen wie diese : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

Ich habe gesehen, wie einige Beispiele online mit anderen Versionen von bootstrap, aber Sie alle ändern der css zu viel, das macht es schwieriger, zu lernen bootstrap.

Ich Frage mich, wenn in der Bootstrap-4 diese kann getan werden, mithilfe von tools wie Zusammenbruch, gestapelte Pillen, flexbox?

Dies ist, was ich erreichen konnte : https://jsfiddle.net/kL9u6esw/20/

Was fehlt aus meiner Jsfiddle :

Nicht richtig reagieren
Die navbar nicht scrollen richtig mit der klebrigen Klasse
Auf die Menü-Taste ist nicht klebrig, obwohl ich die Klasse.
Einem dunklerem hintergrund, obwohl nicht notwendig, für die Antwort, wäre toll

In meinem Beispiel konnte ich nicht herausfinden, wie legen Sie eine Navigationsleiste, nicht sicher, ob seine notwendig, um es richtig zu reagieren.

Auch nicht sicher, ob Sie als a-Säulen ist der richtige Weg, es zu tun, sollte es nicht off-canvas?

Html-code :

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</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>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
          Lorem...
        </div>
      </div>
    </div>
  </div>
</div>

Öffnen werde ich ein Kopfgeld zu akzeptieren, mehr vollständige Antworten, die näher an dem verlinkten Beispiel in Frage
Welche Aspekte genau sind Sie derzeit fehlen von den vorgeschlagenen Lösungen? Was brauchen Sie, um eine Lösung/Antwort mehr vollständig oder ideal für Sie?
Ich denke, meine Antwort beantwortet die ursprünglichen Fragen. "kann getan werden, mithilfe von tools wie Zusammenbruch, gestapelte Pillen, flexbox?... Ich konnte nicht herausfinden, wie legen Sie einen navbar". Jetzt, dass Sie begonnen haben, ein bounty, bitte Bearbeiten Sie die Frage so erklären, was Sie erwarten.
Wo hast den hintergrund dimmer her?
mobile-responsive-version des Beispiels

InformationsquelleAutor Mojimi | 2018-02-26

Sidebar navs können sehr Komplex sein. Dies ist der Grund, warum Bootstrap nicht mit einem "out-of - the-box" - Komponente. Es gibt viele überlegungen für die Seitenleisten:

Reagieren - unterschiedliche Breite, Sichtbarkeit oder die Orientierung auf dem Bildschirm-Breite?
Multi-level - do-der nav-Elemente sub-Ebenen? Welche Auswirkungen wird dies auf die Höhe?
Toggleable - kann die sidebar ein-und ausgeblendet werden, indem eine Taste oder "hamburger"?
Push vs. Overlay - ist Inhalt der Seite versteckt hinter oder neben die Seitenleiste?
Links oder rechts - ist die sidebar auf der linken oder rechten Seite der Inhalt der Seite?
Fest oder klebrig - wie ist die sidebar positioniert auf die Seite scrollen?

In dieser "sidebar" Fall... anstatt col-auto auf der rechten Spalte verwenden col. So wird füllen die Breite, wenn das Menü ausgeblendet ist: https://jsfiddle.net/0rhyzu7o/

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
       ..
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
           ..
        </div>
      </div>
    </div>
  </div>
</div>

~~, Um die animation ein wenig glatter, müssen Sie überschreiben Bootstrap stürzt übergang, die normalerweise arbeitet auf der Höhe~~

EDIT:

Basiert auf der bounty Anfrage, ich aktualisiert die sidebar mit 2 weitere Beispiele. Diese sind näher an den Beispiel, und vor allem die Verwendung von Bootstrap-Klassen.

Minimal-version

Diese version ist näher an dem Beispiel, und hat die gleiche Folie Links/rechts "Schublade" - animation.

body {
    height: 100vh;
    overflow-x: hidden;
    padding-top: 56px;
}

.vh-100 {
    min-height: 100vh;
}

.sidebar.collapse.show,
.sidebar.collapse.show + .col {
    transition: .18s ease;
    transform: translate(0,0,0);
    left: 0;
}

.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
    transition: .18s ease;
    transform: translate(-25%,0,0);
    z-index: 1050;
    left: -25%;
}

Demo-minimal-version: https://www.codeply.com/go/w1AMD1EY3c

Vollversion (sehr in der Nähe der Beispiel):

Diese sidebar-Funktionen:

fester Breite
schließt sich automatisch an kleinere Bildschirme, öffnet sich auf eine breitere Bildschirme
kann umgeschaltet werden, offen/geschlossen bei einer Breite
reagieren - wird eine Feste overlay auf kleineren breiten

Diese volle version erfordert ein wenig mehr CSS, aber bei einigen ist es optional...

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
   height: 100vh;
   overflow-x: hidden;
   padding-top: 55px;
}

/* set the sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

/* optional */
.vh-100 {
    min-height: 100vh;
}

/* optional for overlay sidebar on small screens */
@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
    <div class="row collapse show no-gutters d-flex h-100 position-relative">
        <div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
            <!-- spacer col -->
        </div>
        <div class="col px-2 px-md-0">
            <!-- toggler -->
            <a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
                <i class="fa fa-bars fa-lg"></i>
            </a>
        </div>
    </div>
</div>
<div class="container-fluid px-0 h-100">
    <div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
        <div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
            <!-- fixed sidebar -->
            <div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col p-3">
            <h3>Content..</h3>
            <p class="lead">Try this is full-page view to see the animation on larger screens!</p>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
        </div>
    </div>
</div>    

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Demo Vollversion: https://www.codeply.com/go/XJE8LOdX8k

Sowohl die minimal und robust Beispiele sind viel näher an der original-Beispiel. Es ist einfach, um Farbe zu ändern und ändern Sie die Stile. Hier ist eine andere Variante mit der sidebar überlagerung der toggle-Leiste an der Spitze.

Siehe auch: Bootstrap Navbar Collapse Overlay Sidebar

Hey, das löst eines der Probleme! Aber das scrollen funktioniert nicht richtig, und es wird nicht in der Nähe
Ah, es tut der Nähe, der nur ein bisschen verzögert, es scheint, ich Frage mich, ob es hat etwas zu tun mit jsfiddle
aktualisiert meine Antwort mit 2 mehr Möglichkeiten!
Auch für mich, die animation verzögert seltsam. Können wir das beheben? Ich Frage mich auch, wie man den oberen Bereich schieben Sie den Inhalt Weg, anstatt sich überlappende es.
Ich denke, die seltsame animation ist, weil der "linear" wechseln, die zu "Leichtigkeit"

InformationsquelleAutor Zim

Also hier ist eine mögliche Lösung zu den Punkten 1-3.

Den Schlüssel zu Lösung #1 wurde zur Verfügung gestellt von @zimsystem:
"Statt mit col-auto auf der rechten Spalte verwenden, col. So wird füllen die Breite, wenn das Menü ausgeblendet ist."

Zu lösen #2, die Sie benötigen, um loszuwerden, der h-100 in der ersten Zeile und Spalte:

<div class="container-fluid h-100">
  <div class="row *h-100*">
     <div class="col-5 col-md-3 collapse m-0 p-0 *h-100* bg-dark" id="collapseExample">
     ...
     </div>
  </div>
</div>

(dies ist nicht der richtige code, ich kenn die Klassen, die Sie löschen müssen, um mit Sternchen)

Sobald Sie dies tun, wird der Menü-Spalte wird gestreckt, um die volle Länge der content-Spalte.

Zu lösen #3, Sie müssen nur ziehen Sie die Schaltfläche aus einem sub-Spalte, in die Haupt-Spalte. Es war eingeschnappt in die mini-Spalte, die Sie hatte, zugeordnet.

<div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">

     <div class="col-12">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in...
     </div>

Zusätzlich habe ich noch etwas CSS für das Menü in den Fall, Sie am Ende mit mehr links als in dem Beispiel, so dass Sie dann die scroll-richtig, wenn die Liste zu lang für Ihren Bildschirm.

.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

Den vollständigen code für diese Antwort ist hier:

CSS:

body{
  height : 100vh;
  overflow : scroll;
}

.collapse.width.show {
    transition: max-width .3s ease, min-width .3s ease;
    width: 100%;
    max-width: 100%;
    min-width: initial;
}
.collapse.width,
.collapsing.width {
   max-width: 0;
   min-width: 0;
   width: 0;
   transition: all .2s ease;
}
.collapse .flex-column {
  max-height: 100vh;
  overflow: auto;
  flex-wrap: nowrap; /* Optional, if you don't want the links to form columns if they overflow */
}
.collapse .flex-column li { 
  width: 100%; 
}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid h-100">
  <div class="row">
    <div class="col-5 col-md-3 collapse width m-0 p-0 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top"> 
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</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>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" id="" role="button">
           Menu
      </button>
      <div class="row">
       
        <div class="col-12">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in lectus in nibh facilisis luctus. Maecenas sagittis pellentesque sapien, vitae dignissim nisl luctus interdum. Aenean risus justo, vestibulum ultrices posuere ornare, consectetur ac enim. Pellentesque egestas eleifend diam in tincidunt. Cras eget dignissim lacus. Praesent condimentum arcu nisi, ut ultrices lorem imperdiet sed. Suspendisse a elit quis erat volutpat bibendum. Proin metus odio, hendrerit at fermentum quis, suscipit id felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla nec mattis nibh, in dignissim turpis.

Integer sem nulla, malesuada non gravida sit amet, porttitor ac lorem. Nam gravida facilisis pulvinar. Maecenas lacinia tellus in diam pretium gravida. Pellentesque massa tellus, egestas sed odio vitae, convallis mollis massa. Duis at scelerisque nisi. Phasellus eu dapibus orci. Mauris tortor urna, vestibulum eget consectetur id, fringilla non sapien. Vivamus sagittis facilisis auctor. Pellentesque mollis posuere tincidunt. Fusce at mauris vel ante ullamcorper sollicitudin.

Phasellus nibh ex, fermentum id tristique vel, consequat a lectus. Donec consequat nec nulla et fringilla. Aenean in ligula in eros mollis auctor non facilisis leo. Fusce lectus lacus, convallis vel tempor et, mattis non urna. Suspendisse velit libero, dapibus ut augue et, semper tincidunt purus. Donec gravida felis non consequat sollicitudin. Ut imperdiet ante quis est rutrum bibendum at non eros. Pellentesque luctus, ipsum nec lacinia vestibulum, nulla lorem volutpat risus, sit amet dignissim nisl ipsum varius neque. In volutpat, quam quis aliquet luctus, nulla nibh hendrerit ex, et eleifend dolor odio et mi. Duis tempus sem vitae lacus imperdiet semper. Curabitur et consequat elit. Cras suscipit rhoncus elit, non volutpat ex vulputate pharetra. Donec nec elit sit amet tortor egestas maximus. Suspendisse risus neque, accumsan eu porttitor et, tincidunt quis nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam massa est, varius malesuada rhoncus sodales, bibendum at leo.

Nullam porta libero vel tortor maximus volutpat. Aenean maximus sollicitudin ipsum, vitae pulvinar sapien blandit sed. Vestibulum sed elit viverra, dignissim nisi at, tristique mi. Pellentesque in viverra nulla. Morbi porttitor, ligula id malesuada mattis, lorem libero tempor mauris, sed aliquet neque leo et nunc. Donec odio nibh, posuere at condimentum vel, laoreet in lacus. Nulla sollicitudin scelerisque urna, nec gravida arcu sagittis quis. Fusce auctor urna sed diam dignissim, at interdum lorem ornare. Fusce viverra, diam eu tempor volutpat, sapien turpis lacinia ligula, ac venenatis mi magna eget ante. Nullam dignissim blandit urna, vel consectetur dui venenatis ac. Cras volutpat, ligula in finibus mattis, sem quam ullamcorper ligula, eget ultricies ipsum mi vitae enim.

Proin porta lorem quis sem porttitor, nec lacinia enim viverra. Sed tortor dolor, congue vitae bibendum feugiat, efficitur non augue. Curabitur vitae nunc eget libero euismod fringilla. Nulla pretium dignissim lacus. Aliquam purus lorem, molestie vel turpis ac, euismod fermentum erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ac varius massa, non tempus elit. Phasellus quis tortor iaculis est sollicitudin rutrum id non mi. In eget pharetra justo. Morbi vitae commodo eros. Quisque facilisis blandit laoreet. 
        </div>
      </div>
    </div>
  </div>
</div><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Lassen Sie mich wissen, wie es geht!

Ich würde sagen, das ist ziemlich gut, ich werde studieren, es ein bisschen mehr
Denkst du das Verhalten aus dem Beispiel, dass es überschneidungen anstatt sich auf mobile erreicht werden könnte, nur mithilfe von html/css?

InformationsquelleAutor Victoria Ruiz

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.