HTML/CSS流体可折叠侧栏

Question

我试图做一个可切换的侧边栏这个网站，我要的是下面

我想主要内容是流体和适应后，多少显示的内容它在屏幕上的空间。有没有一种简单的方法来做到这一点，而不使用像twitter bootstrap等框架...... 所以我问的是有没有人知道一种方法来使边栏可折叠没有任何框架？

Answer 1

http://jsfiddle.net/MNgMB/1/

难道这就是你要找的人？让我知道。

HTML

<div id="inline_container"> 
    <div id="toggle_menu"> 
     <div id="toggle"> 
     </div> 
    </div> 
    <div id="main_container">main container</div> 
</div> 

的Javascript

var toggled = true; 

$("#toggle_menu").click(function(){ 
    if(toggled) { 
     toggled=false; 
    $(this).animate({width: "20px"}, "fast"); 
    }else { 
     toggled=true; 
      $(this).animate({width: "200px"}, "fast"); 
    } 
}); 

CSS

* {margin: 0; padding: 0;} 
.body {height: 100%; width: 100%;} 
#inline_container {height: 500px; width: 100%;} 
#toggle_menu {height: 100%; width: 20px; display: inline-block; float: left; background: lime;} 
#main_container {height: 100%; width: 65%; display: inline-block; float: left;} 
#toggle {height: 100%; width: 20px; display: inline-block; float:left; background: green;}