Ich bin auf der Suche nach einer CSS-Lösung, um eine Schaltfläche zum Ein- und Ausschalten einer Seitenleiste mithilfe von Twitter-Bootstrap zu erstellen.

Ich hätte gerne eines dieser kleinen Symbole auf der Webseite, das beim Schließen der Seitenleiste wie ein Pull-Tab aussieht und beim Ziehen der Seitenleiste nach außen folgt. Hat das einen Namen?

Ich habe dazu einen Link mit dem toggleSidebar-Symbol erstellt, aber ich habe zwei Probleme:

Ich kann es nicht mit float: left oder display: inline-block in der Sidebar zum Floaten bringenBehoben, es erstellt eine eigene Spalte ... Ich möchte, dass es über dem Hauptinhalt schwebt.

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

Das CSS:

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

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

Ein funktionierendes Beispiel dafür:http://jsfiddle.net/amorris/dmyTR/

Für das Leben in mir kann ich kein Beispiel im Web finden - aber hier ist eine kurze Zeichnung dessen, wonach ich strebe:

Es ist ein bisschen wie der Effekt @http://simplerealtytheme.com/plugins/pullout-widgets/ - Wie es aussieht, verwenden sie ein Display: block; Lösche beide; und positionieren Sie dann die Zuglasche absolut innerhalb des Div mit einer negativen rechten Position.