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