jquery从右向左滑动侧栏，调整内容大小

我正在尝试创建一个外观类似下图的侧栏

正如您在图中看到的，我想要一个默认打开的边栏，如果用户关闭它，无论边栏是否打开，cookie都会保存。打开或关闭侧边栏也会影响页面内容的大小，我试图在我制作的模型中用%来显示页面内容

我一直在搜索类似的东西，但我能找到的最接近的是以下为另一个想要类似东西的用户制作的JSFIDLE。。。但不完全一样

jsfiddle.net/7ZBQa

---

有人能帮我吗？如果有人能帮我，我将不胜感激。=）

响应性设计所需的结果

HTML

jQuery

<script>
$(document).ready(function(){
    // Variables
    var objMain = $('#main');

    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
    }

    // Hide sidebar
    function hideSidebar(){
        objMain.removeClass('use-sidebar');
    }

    // Sidebar separator
    var objSeparator = $('#separator');

    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');

});
</script>

$（文档）.ready（函数（）{
//变数
var objMain=$（“#main”）；
//显示边栏
函数showSidebar（）{
addClass（'use-sidebar'）；
}
//隐藏侧边栏
函数hideSidebar（）{
objMain.removeClass（'use-sidebar'）；
}
//边栏分隔符
var objsepator=$（“#分隔符”）；
objSeparator.单击（函数（e）{
e、 预防默认值（）；
if（objMain.hasClass（'use-sidebar'））{
hideSidebar（）；
}
否则{
showSidebar（）；
}
}).css（'height'，objsepator.parent（）.outerHeight（）+'px'）；
});

---

这是我在这个项目中所使用的工具的基础，我希望能够切换它的侧边栏，它还记得它的位置。我找到了一个完美的例子，说明了我正在努力实现的目标，唯一的区别是我需要它完全相反的一面，并且是固定的。我会继续搞砸这件事，直到我听到有人回来=）几乎，但不是完全，我希望侧边栏的效果得到修复，也有侧边栏的折叠功能，最后我希望它记住用户是否折叠它或不使用cookie。。。我知道这要求有点高，但我现在也在努力。只是还没到我想去的地方嘿这看起来怎么样。。。。我基本上只是剥离了所有的代码，我只使用了一个div（内容）和一个…边栏框，虽然它被编码到vbulletin中有点难剥离，但当我有一些不是代码剽窃的东西时，我将与大家分享。除非有人能帮我找到一个更简单的方法。

#content,#sidebar {
    line-height: 300px;
    text-align: center;
    border: 1px solid;
}

#sidebar {
    background-color: #DEF;
    border-color: #BCD;
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar #content {width: 64%;}
.use-sidebar #sidebar {
    display: block;
    width: 32%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-right #sidebar {margin-left: 1%;}

.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}
.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {float: left;}

#separator {
    background-color: #000;
    border: 1px solid #CCC;
    display: block;
    outline: none;
    width: 1%;
    margin-top: 145px;
}
.use-sidebar #separator {
    background: #000;
    border-color: #FFF;
    width:1%;
}
#separator:hover {
    border-color: #ABC;
    background: #DEF;
}

<script>
$(document).ready(function(){
    // Variables
    var objMain = $('#main');

    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
    }

    // Hide sidebar
    function hideSidebar(){
        objMain.removeClass('use-sidebar');
    }

    // Sidebar separator
    var objSeparator = $('#separator');

    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');

});
</script>