web-dev-qa-db-fra.com

Barre latérale pliable avec Twitter fluide bootstrap

Je recherche une solution CSS pour créer un bouton pour activer et désactiver une barre latérale à l'aide de Twitter bootstrap.

J'aimerais qu'une de ces petites icônes que les gens ont sur leur page Web ressemble à une tirette lorsque la barre latérale est fermée, puis suit la barre latérale lorsqu'elle est tirée - est-ce que cela a un nom?

J'ai créé un lien d'icône toggleSidebar pour ce faire, mais j'ai deux problèmes:

  1. Je ne peux pas le faire flotter avec la barre latérale en utilisant float: left ou display: inline-block
  2. Corrigé, il crée sa propre colonne ... Je veux qu'il flotte au-dessus du contenu principal.

Le html:

<div class="container-fluid">
  <div class="row-fluid">
    <div id="sidebar" class="span3 scrollDiv" style="display: none;">
      <!--Sidebar content-->
    </div>
    <div id="content" class="span12">
      <!--Main content-->
    </div>
    <a id="toggleSidebar" href="#" class="toggles"><i class="icon-chevron-right"></i></a>
  </div>
</div>

Le css:

#toggleSidebar {
  /* float: left; */
  /* display:inline-block; */
  position:fixed;
  display:block;
  left:0;
  top:45px;
  color:#779DD7;
  padding:2px 4px;
}

Le javascript:

function sidebar(panels) {
  if (panels === 1) {
    $('#content').removeClass('span9');
    $('#content').addClass('span12 no-sidebar');
    $('#sidebar').hide();
  } else if (panels === 2) {
    $('#content').removeClass('span12 no-sidebar');
    $('#content').addClass('span9');
    $('#sidebar').show();
  }
}

$('#toggleSidebar').click(function() {
  if ($.asm.panels === 1) {
    $('#toggleSidebar i').addClass('icon-chevron-left');
    $('#toggleSidebar i').removeClass('icon-chevron-right');
    return sidebar(2);
  } else {
    $('#toggleSidebar i').removeClass('icon-chevron-left');
    $('#toggleSidebar i').addClass('icon-chevron-right');
    return sidebar(1);
  }
})

Un exemple de travail de ceci: http://jsfiddle.net/amorris/dmyTR/

Pour la vie en moi, je ne trouve pas d'exemple sur le web - mais voici un rapide dessin de ce que je recherche: Pull Bar

C'est un peu comme l'effet @ http://simplerealtytheme.com/plugins/pullout-widgets/ - qui semble utiliser un display: block; clarifier les deux; puis positionner la tirette absolument dans le div avec une position droite négative.

jquerycsstwitter-bootstrapsidebar
23
Adam Morris

Je pense que c'est ce que vous voulez, voir ici .

Le code pertinent est le suivant:

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

#toggleSidebar {
    float:left;
    color:#779DD7;
    padding:2px 4px;
}

#sidebar{
    float:left;   
}

Veuillez confirmer que c'est ce que vous avez en tête!

32
Trufa

Est-ce cela que vous aviez en tête?

http://jsfiddle.net/dmyTR/37/

Fondamentalement, au lieu de .hide () et .show (); vous animez sa position.

  // to hide 
  $('#sidebar').animate({
        left: -180,
  });

  // to show
  $('#sidebar').animate({
        left: 20,
  });

J'ai supprimé #sidebar de .container-fluid, car, bien, cela ne fait pas partie du conteneur. J'ai également mis #toggleSidebar dans #sidebar.

15
Aktee

Voici un tiroir latéral animé que j'ai dessiné nécessitant très peu bootstrap modification: http://zombiehippie.github.io/Side-drawer/

@media screen and (max-width: 768px) {
    /* this is container is moved to the side if class is added*/
    .side-collapse-container{
        width:100%;
        position:relative;
        left:0;
        transition:left .4s;
    }
    /* toggled when navbar is out */
    .side-collapse-container.out{
        left:200px;
    }
    .side-collapse {
        /* need top to keep from overlapping fixed header*/
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        position:fixed;
        overflow:hidden;
        /* transition animates the element */
        transition:width .4s;
    }
    /* toggled when navbar is in */
    .side-collapse.in {
        width:0;
    }
}

Une barre de navigation fixe utilisant les styles de .side-collapse nous permet de fixer la barre au bord de notre écran.

Ajouter .side-collapse-container vers le conteneur après l'en-tête permet de déplacer ce contenu à l'ouverture.

Certains scripts ajoutent un événement de clic au [data-toggle=] sélecteur.

$(document).ready(function() {   
    var sideslider = $('[data-toggle=collapse-side]');
    var sel = sideslider.attr('data-target');
    var sel2 = sideslider.attr('data-target-2');
    sideslider.click(function(event){
        $(sel).toggleClass('in');
        $(sel2).toggleClass('out');
    });
});

Regardez la page github pour le html ou le jade source.

Source HTML https://github.com/ZombieHippie/Side-drawer/tree/gh-pages

2
Cole Lawrence