jquery - bootstrap - Barra lateral plegable con arranque de twitter fluido

sidebar css

Question

Estoy buscando una solución CSS para crear un botón para activar y desactivar una barra lateral mediante el uso de Twitter Bootstrap.

Me gustaría uno de esos pequeños íconos que la gente tiene en su página web que parece una pestaña para tirar cuando la barra lateral está cerrada, y luego sigue la barra lateral cuando se tira: ¿tiene nombre?

He creado un enlace al icono de toggleSidebar para hacer esto, pero tengo dos problemas:

1. No puedo hacer que flote con la barra lateral usando float: left o display: inline-block
2. Solucionado, crea una columna propia ... Quiero que flote sobre el contenido principal.

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

El css:

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

El 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 ejemplo http://jsfiddle.net/amorris/dmyTR/ de esto: http://jsfiddle.net/amorris/dmyTR/

Para la vida en mí, no puedo encontrar un ejemplo en la web, pero aquí hay un dibujo rápido de lo que busco:

Es un poco como el efecto @ http://simplerealtytheme.com/plugins/pullout-widgets/ - que parece que están usando una pantalla: bloque; Limpia los dos; y luego posicionando la lengüeta de tiro absolutamente dentro del div con una posición derecha negativa.

Answer 1

¿Es esto lo que tenías en mente?

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

Básicamente, en lugar de .hide () y .show (); Animas su posición.

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

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

Saqué #sidebar de .container-fluid, porque, bueno, no es parte del contenedor. También puse #toggleSidebar dentro de #sidebar.

Answer 2

Aquí hay un cajón lateral animado que dibujé requiriendo muy poca modificación de arranque: 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;
    }
}

Una barra de navegación fija que utiliza los estilos de .side-collapse nos permite arreglar la barra en el borde de nuestra pantalla.

La adición de .side-collapse-container al contenedor después del encabezado permite que el contenido se desplace al abrirlo.

Algunas secuencias de comandos agregan un evento de clic al selector [data-toggle=] .

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

Mira la página de github para el código fuente o jade.

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

Answer 3

Creo que esto es lo que quieres, mira here .

El código relevante es este:

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

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

#sidebar{
    float:left;   
}

¡Por favor confirma que eso era lo que tienes en mente!