Szukam rozwiązania CSS, aby utworzyć przycisk do włączania i wyłączania paska bocznego za pomocą programu ładującego Twitter.

Chciałbym mieć jedną z tych małych ikon, które ludzie mają na swojej stronie internetowej, a która wygląda jak karta ciągnąca, gdy pasek boczny jest zamknięty, a następnie podąża za paskiem bocznym, gdy jest pociągany - czy ma to nazwę?

Aby to zrobić, utworzyłem łącze ikony paska bocznego, ale mam dwa problemy:

Nie mogę go uruchomić na pasku bocznym za pomocą float: left lub display: inline-blockNaprawiono, tworzy własną kolumnę ... Chcę, żeby była unoszona nad główną treścią.

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>

The css:

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

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

Działający przykład tego:http://jsfiddle.net/amorris/dmyTR/

Żeby żyć we mnie, nie mogę znaleźć przykładu w sieci - ale oto szybki rysunek tego, po czym jestem:

To trochę jak efekt @http://simplerealtytheme.com/plugins/pullout-widgets/ - wygląda na to, że używają bloku display:; oba czyste; a następnie pozycjonowanie uchwytu absolutnie w obrębie div z ujemną prawą pozycją.