Zusammenklappbare Seitenleiste mit fließendem Twitter-Bootstrap

Ich suche nach einer CSS-Lösung, um eine Schaltfläche zum Ein- und Ausschalten einer Seitenleiste mit Twitter Bootstrap zu erstellen.

Ich hätte gerne eines dieser kleinen Symbole, die die Leute auf ihrer Webseite haben, das wie eine Zuglasche aussieht, wenn die Seitenleiste geschlossen ist, und dann der Seitenleiste folgt, wenn sie gezogen wird – hat das einen Namen?

Ich habe dazu einen ToggleSidebar-Symbollink erstellt, aber ich habe zwei Probleme:

1. Ich kann es nicht dazu bringen, mit der Seitenleiste zu schweben, indem ich float: left oder display: inline-block verwende
2. Behoben, 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 Internet finden – aber hier ist eine kurze Zeichnung dessen, wonach ich suche:

Es ist ein bisschen wie der Effekt @ http://simplerealtytheme.com/plugins/pullout-widgets/ – was so aussieht, als würden sie ein Display verwenden: block; Lösche beide; und dann die Zuglasche absolut innerhalb des div mit einer negativen rechten Position positionieren.

Ich denke, das ist es, was Sie wollen, sehen Sie hier.

Relevanter Code ist dieser:

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

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

#sidebar{
    float:left;   
}

Bitte bestätigen Sie, dass Sie das im Sinn haben!

Hatten Sie das im Sinn?

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

Grundsätzlich statt .hide() und .show(); Sie animieren seine Position.

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

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

Ich habe #sidebar aus .container-fluid entfernt, weil es nicht Teil des Containers ist. Ich habe auch #toggleSidebar in #sidebar eingefügt.

Hier ist eine animierte Seitenschublade, die ich erstellt habe und die nur sehr wenig Bootstrap-Modifikation erfordert:
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;
    }
}

Eine feste Navigationsleiste mit den Stilen von .side-collapse ermöglicht es uns, die Leiste am Rand unseres Bildschirms zu befestigen.

Hinzufügen .side-collapse-container zum Container nach dem Header ermöglicht, dass dieser Inhalt beim Öffnen verschoben wird.

Einige Skripte hängen ein Click-Ereignis an die an [data-toggle=] Wähler.

$(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');
    });
});

Suchen Sie auf der Github-Seite nach dem Quell-HTML oder Jade.

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