切换内容区域上的jquery在显示区域下方移动

我正在尝试复制facebook移动网站，点击一个菜单按钮，左边的菜单就会出现。我遇到的问题是，我希望我的内容区域的宽度为100%，但当隐藏菜单显示时，100%的内容区域会下降到菜单下方

以下是js小提琴： 代码如下所示

提前感谢您的回复

HTML

jQuery

 $("#menuButton").click(function () {
     $('#menu').toggle(),750;
 }); ​

---

这样可以防止水平滚动条弹出，同时也可以在顶部填充内容，以便实际显示内容

---

这是什么意思？”100%的内容区域位于菜单下方。“看起来你的小提琴正在工作……你能再解释一下吗？”？也许可以添加不同的背景色来帮助解释你想要做什么？在小提琴中，包含按钮的标题会落在菜单下，我只希望它向右移动240像素。我已经更新了提琴，将内容区域显示为灰色，以显示内容区域正在向下移动，而不是正确移动。很抱歉，延迟，我的主机已关闭，因此我无法获取文件，我将在其恢复后立即使用链接进行更新。实际上，我现在正在使用此功能，非常感谢您的帮助。这确实对标题进行了排序，但灰色内容区域仍会下降到下方。@HUDDS所以您希望内容位于菜单下？或者像标题一样移动？@VIDesignz您几乎是正确的，只需要将

#header

和

#content

包装到另一个div中，并将脚本应用于它们。工作@HUDDS修订答案…防止弹出水平滚动，并将内容放在顶部，以实际显示答案content@AndreiR+1谢谢，伙计，我不确定他到底要干什么……再一次，谢谢！

 body{padding:0px; margin:0px; width:100%; min-width:320px; height:100%; min-height:480px; background-color:#FFFFFF;}
 #menu{ width:240px; min-width:240px; height:100%; min-height:480px; float:left; background-color:#CCCCCC; display:none; position:relative;}
 #header{ height:48px; width:100%; min-height:48px; min-width:320px; background-color:#666666;  float:left;}
 #menuButton{ width:30px; height:30px; background-color:#999999;margin-top:9px; margin-left:15px;}
 #content{ float:left;  min-width:320px;  min-height:480px; width:100%;}

 $("#menuButton").click(function () {
     $('#menu').toggle(),750;
 }); ​

    $("body").on('click', '#menuButton', function () {

        if($('#container').position().left === 0){
            $('#container').css({'left' : 240 , 'width' : $('#container').width() - 240 } );
        }else{
            $('#container').css({'left' : 0, 'width' : '100%'});
        }

        $('#menu').toggle();
    });