Eu estou procurando uma solução CSS para criar um botão para ativar e desativar uma barra lateral usando o bootstrap do twitter.

Eu gostaria de um desses pequenos ícones que as pessoas têm em sua página da Web que se parece com uma guia quando a barra lateral é fechada e, em seguida, segue a barra lateral quando é puxada - isso tem um nome?

Eu criei um link do ícone toggleSidebar para fazer isso, mas tenho dois problemas:

Eu não consigo fazer isso flutuar com a barra lateral usando float: left ou display: inline-blockCorrigido, ele cria uma coluna própria ... Eu quero que ele flutue no topo do conteúdo principal.

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

O css:

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

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

Um exemplo prático disso:http://jsfiddle.net/amorris/dmyTR/

Para a vida em mim, não consigo encontrar um exemplo na web - mas aqui está um rápido desenho do que eu estou procurando:

É um pouco como o efeito @http://simplerealtytheme.com/plugins/pullout-widgets/ - o que parece que eles estão usando um display: block; limpar ambos; e, em seguida, posicionando a aba de puxar absolutamente dentro do div com uma posição direita negativa.