Barra lateral plegable con Bootstrap

102

Acabo de visitar esta página http://www.elmastudio.de/ y me pregunté si es posible construir el colapso de la barra lateral izquierda con Bootstrap 3.

Código para contraer la barra lateral desde la parte superior (solo teléfono):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

La barra lateral en sí tiene la clase hidden-xs. Se elimina con el siguiente js

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Si hace clic en el botón, cambia la barra lateral desde la parte superior. Sería genial ver que la barra lateral se comporta como muestra el sitio web anterior. ¡Se agradece cualquier ayuda!

Chris Nosotros
fuente
7
¿Estamos todos de acuerdo en que elmastudio.de ya no tiene esa barra lateral colapsada?
Peter V. Mørch
También comprobación estas colecciones de menú de arranque barra lateral útiles designerslib.com/bootstrap-sidebar-menu-templates
Karuppiah RK

Respuestas:

124

Bootstrap 3

Si es posible. Este ejemplo "fuera del lienzo" debería ayudarlo a comenzar.

https://codeply.com/p/esYgHWB2zJ

Básicamente, debe envolver el diseño en un div externo y usar consultas de medios para alternar el diseño en pantallas más pequeñas.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

Además, hay varios ejemplos más de barra lateral de Bootstrap aquí


Bootstrap 4

¿Crear un "cajón" de barra lateral de barra de navegación sensible en Bootstrap 4?

Zim
fuente
@Delucia: funciona en Chrome en Android. Bootply en sí no funciona correctamente, pero haz clic en el enlace "Cambiar a la vista de procesamiento".
Dan Dascalescu
2
aquí está la plantilla
shaijut
1
@stom: Se esconde en las versiones móvil y tableta que es el problema.
fuddin
25

http://getbootstrap.com/examples/offcanvas/

Este es el ejemplo oficial, puede ser mejor para algunos. Se encuentra en la sección de ejemplos de experimentos, pero como es oficial, debe mantenerse actualizado con la versión de arranque actual.

Parece que han agregado un archivo css fuera del lienzo utilizado en su ejemplo:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

Y algo de código JS:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
Jon
fuente
9

EDITAR: He agregado una opción más para las barras laterales de arranque.

En realidad, hay tres maneras en las que puede crear una barra lateral de bootstrap 3. Traté de mantener el código lo más simple posible.

Barra lateral fija

Aquí puede ver una demostración de una barra lateral fija simple que he desarrollado con la misma altura que la página.

Barra lateral en una columna

También desarrollé una barra lateral de columnas bastante simple que funciona en una página de dos o tres columnas dentro de un contenedor. Toma la longitud de la columna más larga. Aquí puedes ver una demostración

Tablero

Si usa el panel de arranque de Google, puede encontrar varios paneles adecuados, como este . Sin embargo, la mayoría de ellos requieren mucha codificación. Desarrollé un panel que funciona sin javascript adicional (junto al javascript de arranque). Aquí hay una demostración

Para los tres ejemplos, por supuesto, debe incluir los archivos jquery, bootstrap css, js y theme.css.

Barra deslizante

Si desea que la barra lateral se oculte al presionar un botón, esto también es posible con solo un poco de javascript. Aquí hay una demostración

FabianW
fuente
6

Vía Angular: usando ng-classAngular, podemos ocultar y mostrar la barra lateral.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
Razan Paul
fuente
3

No se menciona en el documento, pero la barra lateral izquierda en Bootstrap 3 es posible usando el método "Collapse".

Como lo menciona bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Esto significa que, al agregar la clase "ancho" al objetivo, se expandirá por ancho en lugar de alto:

http://jsfiddle.net/2316sfbz/2/

erw13n
fuente
¿Cómo lo harías para ocultar el menú de la izquierda solo en un 80% y mostrar un pequeño botón para expandir nuevamente el menú?
Pathros