可折叠的侧边栏，带有流畅的twitter bootstrap

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

我喜欢人们在他们的网页上看到的一个小图标，当侧边栏关闭时，它们看起来像拉片，然后在拉出边栏时跟随它 – 这是否有名字？

我已经创建了一个toggleSidebar图标链接来执行此操作，但我有两个问题：

1. 我不能使用float：left或display：inline-block让它与侧边栏一起浮动
2. 修复了，它创建了一个自己的列…我希望它浮动在主要内容之上。

html：

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

一个工作的例子： http ： //jsfiddle.net/amorris/dmyTR/

对于我的生活，我无法在网络上找到一个例子 – 但这里是我所追求的快速绘图：

这有点像效果@ http://simplerealtytheme.com/plugins/pullout-widgets/ – 看起来他们正在使用display：block; 明确：两者; 然后将拉片绝对定位在具有负右位置的div内。

Answer 1

我想这就是你想要的，看到这里 。

相关代码是这样的：

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

请确认这是你的想法！

Answer 2

这是你的想法吗？

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

基本上，而不是.hide（）和.show（）; 你动画它的位置。

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

我从.container-fluid中删除了#sidebar，因为它不是容器的一部分。 我还把#toggleSidebar放在#sidebar里面。

Answer 3

这是一个动画的侧抽屉，我起草需要很少的引导修改：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; } } 

使用.side-collapse样式的固定导航栏允许我们将栏固定到屏幕边缘。

在标题之后将.side-collapse-container添加到容器允许在打开时转移内容。

某些脚本会将click事件附加到[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'); }); }); 

查看源html或jade的github页面。

HTML源代码https://github.com/ZombieHippie/Side-drawer/tree/gh-pages