Barre latérale repliable avec Bootstrap


102

Je viens de visiter cette page http://www.elmastudio.de/ et je me suis demandé s'il était possible de créer le repli de la barre latérale gauche avec Bootstrap 3.

Code pour réduire la barre latérale à partir du haut (téléphone uniquement):

<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 barre latérale elle-même a la classe hidden-xs. Il est supprimé avec les js suivants

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

Si vous cliquez sur le bouton, cela fait basculer la barre latérale du haut. Ce serait formidable de voir la barre latérale se comporter comme le site Web ci-dessus le montre. Toute aide est appréciée!


7
Sommes -nous tous d'accord pour dire que elmastudio.de n'a plus cet effondrement de la barre latérale?
Peter V.Mørch

Consultez également ces collections utiles de menus de la barre latérale bootstrap designerslib.com/bootstrap-sidebar-menu-templates
Karuppiah RK

Réponses:


124

Bootstrap 3

Oui c'est possible. Cet exemple «hors canevas» devrait vous aider à démarrer.

https://codeply.com/p/esYgHWB2zJ

Fondamentalement, vous devez envelopper la mise en page dans un div externe et utiliser des requêtes multimédias pour basculer la mise en page sur des écrans plus petits.

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

En outre, il existe plusieurs autres exemples de barre latérale Bootstrap ici


Bootstrap 4

Créer un "tiroir" de barre latérale de barre de navigation réactif dans Bootstrap 4?


@Delucia: cela fonctionne sur Chrome sur Android. Bootply lui-même ne fonctionne pas correctement, mais cliquez sur le lien "Basculer vers la vue de rendu".
Dan Dascalescu

2
voici le modèle de tableau de bord
shaijut

1
@stom: il se cache sur les versions mobile et tablette qui est le problème.
fuddin

25

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

Ceci est l'exemple officiel, peut-être mieux pour certains. Il se trouve dans leur section d'exemples d'expériences, mais comme il est officiel, il doit être mis à jour avec la version actuelle de bootstrap.

On dirait qu'ils ont ajouté un fichier css hors canevas utilisé dans leur exemple:

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

Et du code JS:

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

9

EDIT: J'ai ajouté une autre option pour les barres latérales de bootstrap.

Il existe en fait trois manières de créer une barre latérale bootstrap 3. J'ai essayé de garder le code aussi simple que possible.

Barre latérale fixe

Ici vous pouvez voir une démo d'une simple barre latérale fixe que j'ai développée avec la même hauteur que la page

Barre latérale dans une colonne

J'ai également développé une barre latérale de colonnes assez simple qui fonctionne dans une page à deux ou trois colonnes à l'intérieur d'un conteneur. Il prend la longueur de la colonne la plus longue. Ici vous pouvez voir une démo

Tableau de bord

Si vous google tableau de bord bootstrap, vous pouvez trouver plusieurs tableaux de bord appropriés, tels que celui-ci . Cependant, la plupart d'entre eux nécessitent beaucoup de codage. J'ai développé un tableau de bord qui fonctionne sans javascript supplémentaire (à côté du javascript bootstrap). Voici une démo

Pour les trois exemples, vous devez bien sûr inclure les fichiers jquery, bootstrap css, js et theme.css.

Barre de défilement

Si vous souhaitez que la barre latérale se masque en appuyant sur un bouton, cela est également possible avec seulement un peu de javascript.Voici une démo


6

Via Angular: en utilisant ng-classAngular, nous pouvons masquer et afficher la barre latérale.

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

3

Ce n'est pas mentionné sur doc, mais la barre latérale gauche sur Bootstrap 3 est possible en utilisant la méthode "Réduire".

Comme mentionné par bootstrap.js:

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

Cela signifie que l'ajout de la classe "largeur" ​​dans la cible se développera en fonction de la largeur au lieu de la hauteur:

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


Comment feriez-vous pour masquer le menu de gauche à seulement 80% et afficher un petit bouton pour développer à nouveau le menu?
Pathros
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.