html - ¿Crear un “cajón” de barra lateral de navegación sensible en Bootstrap 4?

css twitter-bootstrap

Question

Intentando lograr algo como esto: https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html

He visto algunos ejemplos en línea usando otras versiones de bootstrap, pero todos cambian demasiado el CSS, lo que hace que sea más difícil aprender Bootstrap.

Me preguntaba si en Bootstrap 4 esto se puede hacer usando herramientas como colapso, píldoras apiladas, flexbox.

Esto es lo que podría lograr: https://jsfiddle.net/kL9u6esw/20/

Lo que falta en mi Jsfiddle:

1. No responde correctamente
2. La barra de navegación no se desplaza correctamente con la clase adhesiva
3. El botón de menú no está fijo aunque configuré la clase.
4. Un atenuador de fondo, aunque no es necesario para la respuesta, sería genial.

En mi ejemplo, no pude averiguar cómo insertar una barra de navegación, no estoy seguro de si es necesario para que responda correctamente.

Tampoco estoy seguro de si tenerlo como columnas es la forma correcta de hacerlo, ¿no debería estar fuera del lienzo?

Código 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>

Answer 1

Así que aquí hay una posible solución a los puntos 1-3.

@Zimsystem proporcionó la clave para resolver el n. ° 1 : "En lugar de usar col-auto en la columna de la derecha, use col. De esa manera, se llenará el ancho cuando el menú se contraiga".

Para resolver el n. ° 2 , debe deshacerse de h-100 en la primera fila y columna:

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

(este no es el código correcto, marqué las clases que necesita eliminar con asteriscos)

Una vez que haga esto, la columna del menú se extenderá a la longitud total de la columna de contenido.

Para resolver el n. ° 3 , solo necesita mover el botón de una subcolumna a la columna principal. Permanecía en su lugar dentro de la mini columna a la que lo había asignado.

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

Además, agregué algo de CSS al menú en caso de que termines teniendo más enlaces que en el ejemplo, para que se desplacen correctamente si la lista es demasiado larga para tu pantalla.

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

El código completo para esta respuesta está aquí:

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

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

¡Déjame saber como va!

Answer 2

Las barras laterales pueden ser muy complejas. Es por eso que Bootstrap no tiene un componente "listo para usar". Hay muchas consideraciones para las barras laterales :

• Sensible: ¿ancho, visibilidad u orientación diferentes según el ancho de la pantalla?
• Multinivel: ¿los elementos de navegación tienen subniveles? ¿Cómo afectará esto a la altura?
• Conmutable: ¿se puede alternar la barra lateral con un botón o una "hamburguesa"?
• Push vs. Overlay: ¿el contenido de la página está oculto detrás o al lado de la barra lateral?
• Izquierda o derecha: ¿está la barra lateral a la izquierda o derecha del contenido de la página?
• Fijo o fijo: ¿cómo se coloca la barra lateral en el desplazamiento de la página?

En este caso de "barra lateral" ... en lugar de usar col-auto en la columna derecha, use col . De esa manera, se llenará el ancho cuando el menú se contraiga: 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>

Para hacer que la animación sea un poco más suave, debe anular la transición de colapso de Bootstrap, que normalmente funciona en altura

EDITAR:

Según la solicitud de recompensa, actualicé la barra lateral con 2 ejemplos más. Estos están más cerca del https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html , y usan principalmente clases de Bootstrap.

Versión mínima

Esta versión está más cerca del ejemplo y tiene la misma animación de diapositivas izquierda / derecha "cajón".

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

Versión mínima de demostración : https://www.codeply.com/go/w1AMD1EY3c

Versión completa ( muy cerca del https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html ):

Esta barra lateral presenta:

• ancho fijo
• se cierra automáticamente en pantallas más pequeñas , se abre en pantallas más anchas
• se puede alternar abierto / cerrado en cualquier ancho
• sensible: se convierte en una superposición fija en anchos más pequeños

Esta versión completa requiere un poco más de CSS, pero parte es opcional ...

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

Versión completa de demostración : https://www.codeply.com/go/XJE8LOdX8k

Los ejemplos https://www.codeply.com/go/w1AMD1EY3c y https://www.codeply.com/go/XJE8LOdX8k están mucho más cerca del https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html . Es fácil cambiar de color y modificar los estilos. Aquí hay otra variación con la barra lateral superpuesta a la barra de alternancia en la parte superior.

Ver también: Bootstrap Navbar Contraer a Overlay Sidebar