可折叠边栏带流体twitter启动 [英] Collapsible sidebar with fluid twitter bootstrap

问题描述

我正在寻找一个CSS解决方案来创建一个按钮来切换边栏打开和关闭使用twitter bootstrap。

我想在人们的网页上有一个小图标，当侧边栏关闭时，它看起来像一个拉手，然后当边栏

我创建了一个toggleSidebar图标链接来完成此操作，但我遇到了两个问题：

1. 我无法使用浮动边栏使用float：left或display：inline-block






html：

 < div class =container-fluid> 
< div class =row-fluid> 
< div id =sidebarclass =span3 scrollDivstyle =display：none;> 
<！ - 侧边栏内容 - > 
< / div> 
< div id =contentclass =span12> 
<！ - 主要内容 - > 
< / div> 
< a id =toggleSidebarhref =＃class =toggles>< i class =icon-chevron-right>< / i> 
< / div> 
< / div> 
  

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

一个工作范例： - 看起来像他们正在使用display：block;清除：

解决方案

我认为这是你想要的，看看这里。





相关代码是：

  #content {
 float：left; 
} 
 
 #mapCanvas img {
 max-width：none; 
} 
 
 #maincont {
 margin-top：42px; 
} 
 
 #toggleSidebar {
 float：left; 
 color：＃779DD7; 
 padding：2px 4px; 
} 
 
 #sidebar {
 float：left; 
} 
  

请确认这是您的想法！




I am looking for a CSS solution to create a button to toggle a sidebar on and off using twitter bootstrap.

I'd like one of those little icons people have on their webpage that looks like a pull tab when the sidebar is closed, and then follows the sidebar out when it is pulled - does this have a name?

I've created a toggleSidebar icon link to do this, but I have two problems:

1. I can't get it to float with the sidebar using float: left or display: inline-block
2. Fixed, it creates a column of it's own... I want it float on top of the main content.

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

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

A working example of this: http://jsfiddle.net/amorris/dmyTR/

For the life in me, I can't find an example on the web - but here's a quick drawing of what I'm after:

It's a bit like the effect @ http://simplerealtytheme.com/plugins/pullout-widgets/ - which looks like they're using a display: block; clear: both; and then positioning the pull tab absolutely within the div with a negative right position.

解决方案

I think this is what you want, see here.

Relevant code is this:

#content {
    float:left;
}

#mapCanvas img {
    max-width: none;
}

#maincont{
    margin-top: 42px;
}

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

#sidebar{
    float:left;   
}

Please confirm that that was what you have in mind!

这篇关于可折叠边栏带流体twitter启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！