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