Pliable barre latérale avec des fluides de twitter bootstrap

Je suis à la recherche d'un CSS solution pour créer un bouton pour basculer d'une barre latérale sur et en dehors à l'aide de twitter bootstrap.

J'aimerais un de ces petits icônes de gens ont sur leur page web qui ressemble à une languette lorsque le volet est fermé, puis suit la barre latérale lorsqu'il est tiré - est-ce un nom?

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

Je ne peux pas le faire flotter avec la barre latérale à l'aide float: left ou display: inline-block
Fixe, il crée une colonne de son propre... je le veux flotter au-dessus de la principale.

Le code 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 ceci: http://jsfiddle.net/amorris/dmyTR/

Pour la vie en moi, je ne peux pas trouver un exemple sur le web, mais voici un petit dessin de ce que je suis après:

C'est un peu comme l'effet @ http://simplerealtytheme.com/plugins/pullout-widgets/ - qui dirait qu'ils vont à l'aide d'un display: block; clear: both; et puis le positionnement de la languette absolument à l'intérieur de la div avec un droit négatif de position.

avez-vous regardé jquery comme une option, slideToggle si je suis la compréhension de votre question correctement
Merci bien, je suis d'accord avec le basculement - plus de chercher de l'aide sur le positionnement du bouton qui permet de basculer.
Juste deux conseils: CSS prend en charge uniquement le commentaire syntaxe /* comment */ (à la différence de MOINS, ce qui vous utilisez peut-être) et le point-virgule après la déclaration de la sidebar fonction est inutile.
Est-il un site web avec un effet similaire? J'ai du mal à comprendre. Vous voulez quelque chose qui suit toujours lorsque vous faites défiler, et lorsque vous cliquez dessus, glisse, comme sur Android/iPhone? stackoverflow.com/questions/11377472/...
Je suis un peu confus quant à ce que vous demandez. Donc questions: 1) Est-ce votre problème purement un problème de CSS? Aussi pourriez-vous faire une rapide esquisse de la façon dont il devrait ressembler dans les deux états? Aussi, si vous pourriez discuter une minute, nous pourrions créer une chambre ici chat.stackoverflow.com cheers!
Je n'arrive pas à trouver un exemple de travail sur le web, mais je vois cela comme un problème de CSS. Quelque chose avec le positionnement des choses absolument par rapport à un div conteneur. J'ai ajouté un croquis rapide de la question.
merci - j'ai trouvé un lien vers simplerealtytheme.com/plugins/pullout-widgets c'est un exemple de ce que je suis en train de faire.

InformationsquelleAutor Adam Morris | 2012-11-28

32

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

Code correspondant est: est-ce
```
#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

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

#sidebar{
    float:left;   
}
```
Merci de confirmer que c'est ce que vous avez en tête!
- C'est parfait, je vous remercie!
- Je suis content que ça a aidé!
- Belle démo!!! ....
- comme pour moi, le soufflet de la solution, c'est mieux...
InformationsquelleAutor Trufa
15

Est-ce que vous aviez en tête?

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

En gros, au lieu de .hide() et .show(); vous animez sa position.
```
  //to hide 
  $('#sidebar').animate({
        left: -180,
  });

  //to show
  $('#sidebar').animate({
        left: 20,
  });
```
J'ai enlevé #sidebar de .conteneur de fluide, parce que, eh bien, ça ne fait pas partie du conteneur. J'ai aussi mis des #toggleSidebar à l'intérieur de #sidebar.
- J'ai juste accepté Trufa était avant de voir cela - mais à l'aide de l'animé a l'air beaucoup mieux. Je ne suis pas sûr si je peux sortir avec la couverture de la carte de google, comme je ne veux pas masquer les commandes de zoom sur la partie supérieure gauche de la carte, mais je pense que je peux encore flotter la carte à côté de la barre latérale. J'aime mettre la toggleSidebar à l'intérieur de la barre latérale... en fait beaucoup plus de sens pour moi, intuitivement. Merci!!!!
- Vous êtes mieux couvrant google maps que de redessiner à chaque fois que quelqu'un clique sur votre barre latérale.
- La redéfinition de la performance est d'accord, que les tuiles sont mises en cache localement et de ne pas re-téléchargé... mais il ne déplacer la carte. Une meilleure approche pourrait être de mettre cette barre d'outils sur la droite, et puis je peux le couvercle de la carte google avec la barre d'outils sans perdre quelque chose d'important... il n'a pas l'air plus sexy de l'avoir juste zip sur toute la carte, et enregistre le re-calcul. Je vais regarder à cela.
- merci beaucoup pour cette barre latérale, facile et agréable et bootstrap prêt!
- Quelqu'un peut-il expliquer pourquoi en cliquant sur la barre latérale de la flèche se déplace automatiquement dans le haut de la page?
- C'est parce que la cible du lien est réglé sur "#" qui tend à faire défiler dans le haut de la page.
- Merci!
- mec, c'est la solution parfaite sans des tonnes de code et des bibliothèques externes! Un grand merci!
InformationsquelleAutor Aktee

Voici un animé à côté de tiroir, j'ai établi nécessitant que très peu d'amorçage 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;
    }
}

Fixe barre de navigation en utilisant les styles de .side-collapse nous permet de fixer la barre pour le bord de l'écran.

Ajoutant .side-collapse-container à la le conteneur après l'en-tête permet au contenu d'être changées sur ouvrir.

Un script ajoute un événement click à la [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');
    });
});

Oeil à la page github pour le source html ou jade.

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

InformationsquelleAutor Cole Lawrence

Vous devez vous connecter pour publier un commentaire.