Créer un réactif barre de navigation sidebar “tiroir” dans le Bootstrap 4?

D'essayer d'atteindre quelque chose comme ceci : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

J'ai vu quelques exemples en ligne en utilisant d'autres versions de bootstrap, mais ils ont tous de modifier le css de trop, ce qui rend plus difficile l'apprentissage de bootstrap.

Je me demandais si dans le Bootstrap 4 cela peut être fait en utilisant des outils comme l'effondrement, empilées les pilules, flexbox?

C'est ce que j'ai pu réaliser : https://jsfiddle.net/kL9u6esw/20/

Ce qui est absent de mon Jsfiddle :

Pas correctement sensible
La barre de navigation n'est pas défilement correctement avec le collant classe
Le bouton de menu n'est pas collante, même si j'ai mis la classe.
Un fond gradateur de lumière, bien que n'étant pas nécessaire pour la réponse, serait une grande

Dans mon exemple, je ne pouvais pas comprendre comment insérer une barre de navigation, vous ne savez pas si il est nécessaire pour qu'il soit correctement adapté.

Également pas sûr si le fait d'avoir comme une des colonnes est la bonne façon de le faire, il ne devrait pas être hors de la toile?

Code Html :

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

Je vais ouvrir un bounty pour qu'il accepte plus de réponses complètes que se rapprocher de la lié exemple en question
Quels sont les aspects exactement êtes-vous actuellement défaut dans les solutions proposées? De quoi avez-vous besoin d'une solution/réponse plus complète ou idéales pour vous?
Je pense que ma réponse, a répondu à l'origine des questions. "qui peut être fait en utilisant des outils comme l'effondrement, empilées les pilules, flexbox?... Je ne pouvais pas comprendre comment insérer une barre de navigation". Maintenant que vous avez commencé un bounty, veuillez modifier la question pour expliquer ce que vous attendez.
D'où vient le fond de gradateur à venir?
mobile responsive version de l'exemple

InformationsquelleAutor Mojimi | 2018-02-26

Barre latérale trajets peuvent être très complexes. C'est pourquoi Bootstrap n'est pas un "out-of - the-box" du composant. Il ya beaucoup de considérations pour les Encadrés:

Souple - largeur différente, de visibilité ou d'orientation en fonction de la largeur de l'écran?
Multi-niveau - faire de la valeur liquidative des éléments de sous-niveaux? Quelle en sera l'incidence de la hauteur?
Toggleable la barre latérale être activée par un bouton ou un "hamburger"?
Push vs Overlay - est le contenu de la page cachée derrière ou à côté de la barre latérale?
À droite ou à gauche est la barre latérale à gauche ou à droite de la page de contenu?
Fixe ou collant - comment est la barre latérale positionnée sur la page de défilement?
Style d'Animation - glissez vers la gauche/droite/haut/bas?, l'effondrement?

Dans cette "barre latérale" cas... au lieu d'utiliser col-auto sur la colonne de droite, utilisez col. De cette façon, il remplira la largeur lorsque le menu est effondré: 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>

~~Pour faire de l'animation un peu plus lisse, vous devez remplacer les fichiers d'amorce de l'effondrement de transition qui fonctionne normalement sur une hauteur~~

EDIT:

Basé sur la générosité demande, j'ai mis à jour la barre latérale avec 2 autres exemples. Ces sont plus proches de la exemple, et surtout utiliser Bootstrap classes.

Version minimale

Cette version est plus proche de l'exemple, et a la même glissez vers la gauche/droite "tiroir" de l'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%;
}

Démo version minimale: https://www.codeply.com/go/w1AMD1EY3c

Version complète (très à proximité de la exemple):

Cette barre latérale caractéristiques:

largeur fixe
se ferme automatiquement sur les écrans plus petits, s'ouvre sur des écrans plus larges,
peut être activée ouvert/fermé à toute la largeur de
responsive - devient un fixe superposition sur la plus petite des largeurs de

Cette version ne nécessitent un peu plus de CSS, mais certains de il est facultatif...

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>

Démo de la version complète: https://www.codeply.com/go/XJE8LOdX8k

À la fois la minimes et robuste exemples sont beaucoup plus proches de la exemple d'origine. Il est facile de changer de couleur et de modifier les styles. Voici une autre variation avec le barre latérale la superposition de la barre de basculement en haut.

Voir aussi: Bootstrap barre de navigation de l'Effondrement de la Superposition de la barre latérale

Hey qui résout l'un des problèmes! Mais le défilement ne fonctionne pas correctement, et il ne se referment pas
Ah, il ne ferment, c'est juste un peu retardée, il me semble, je me demande si elle a quelque chose à voir avec jsfiddle
Pour moi aussi, l'animation est retardé, étrangement. Pouvons-nous résoudre ce problème? Je me demande aussi comment faire de la sidemenu pousser le contenu au lieu de le dépasser.
Je pense que l'étrange animation est à cause de la "linéaire", l'interrupteur qui est de "faciliter"

InformationsquelleAutor Zim

Alors, voici une solution possible aux points 1 à 3.

La clé de résolution #1 a été fourni par @zimsystem:
"Au lieu d'utiliser col-auto sur la colonne de droite, utilisez le col. De cette façon, il remplira la largeur lorsque le menu est effondré."

À résoudre #2, vous avez besoin de se débarrasser de h-100 dans la première rangée et de colonne:

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

(ce n'est pas le bon code, j'ai marqué les classes dont vous avez besoin pour supprimer par des astérisques)

Une fois que vous faites cela, le menu de la colonne extensible à toute la longueur de la colonne de contenu.

À résoudre #3, il vous suffit de déplacer le bouton d'une sous rubrique, dans la colonne principale. C'était de rester en place au sein de la mini-colonne vous a assigné à la.

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

En outre, j'ai ajouté un peu de CSS pour le menu dans le cas où vous finissez par avoir plus de liens que dans l'exemple, afin de faire défiler correctement si la liste est trop longue pour votre écran.

.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%; 
}

Le code complet de cette réponse se trouve ici:

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>

Laissez-moi savoir comment ça se passe!

Pensez-vous que le comportement de l'exemple dans ce qu'elle chevauche au lieu de pousser sur mobile pourrait être atteint en utilisant uniquement du html/css?

InformationsquelleAutor Victoria Ruiz

Vous devez vous connecter pour publier un commentaire.