Javascript 屏幕外切换菜单将主要内容推离屏幕右侧

你好，谢谢你抽出时间。下面的HTML、CSS和JavaScript用于创建一个屏幕外菜单，在单击锚定时切换到视图。然后页面的主要内容被发送到右侧的屏幕之外。当屏幕外菜单将主内容向右推时，是否有办法使其包装或调整大小以在屏幕上保持完全可见

$（函数（）{
$（'.toggle nav'）。单击（函数（）{
$（'body'）.toggleClass（'show-nav'）；
返回false；
});
});
nav{
宽度：700px；
身高：100%；
位置：固定；
排名：0；
左：0；
}
.网站包装{
溢出：隐藏；
宽度：100%；
身高：100%；
}
.推包{
边框：1px纯红；
-webkit转换：所有300毫秒的轻松0；
-moz转换：所有300毫秒的速度均为0；
-o型过渡：所有300ms均为0；
过渡：所有300毫秒均为0；
-webkit转换：转换（0,0）；
-moz变换：平移（0,0）；
-ms变换：平移（0,0）；
-o变换：平移（0,0）；
变换：平移（0,0）；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.显示导航。推送包裹{
边框：1px纯绿色；
转换：转换（700px，0）；
变换：translate3d（700px，0，0）；
}
身体{
背景：#e3；
}
a{
过渡：所有300毫秒缓解；
}
导航{
背景#2b343f；
文本对齐：居中；
-webkit盒阴影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
-moz盒阴影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
盒影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；
}
海军ulli a{
显示：块；
文字装饰：无！重要；
高度：60px；
线高：60px；
字号：18px；
颜色：#fff；
}
导航ulli a：悬停{
背景：#4efff；
颜色：#000；
}
文章{
位置：相对位置；
最小高度：1500px；
背景：#e3；
z指数：9；
宽度：100%；
}
第h1条{
文本对齐：居中；
利润率：40px 0 30px；
}
第p条{
字体大小：20px；
线高：30px；
边缘底部：40px；
}
第a.1条-nav{
位置：绝对位置；
字体大小：25px；
颜色：rgb（255、139、139）；
排名：0；
左：0；
背景：#444；
宽度：60px；
高度：60px；
线高：60px；
文本对齐：居中；
}







屏幕外导航
废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话废话

要让您了解可能发生的情况，请查看此鼓室示例：

我想你最好的选择是做一些类似于scaledown pusher示例的事情。最好的办法是缩小当前页面的比例，使其保持可见

下一次的提示：将您的代码放在一个列表中，以便人们下次更容易地查看您的示例。
要让您了解可能的情况，请查看此tympanus示例：

我想你最好的选择是做一些类似于scaledown pusher示例的事情。最好的办法是缩小当前页面的比例，使其保持可见

下一次的提示：将您的代码放在一个文件夹中，以便人们下次更容易地查看您的示例。
您好，我已经用JS fiddle快速完成了这项工作

这就是你想要的效果吗


CSS:

Javascript:

$(function() {

    $('.toggle-nav').click(function() {
        $('nav').slideToggle();
    });

});

嗨，我很快就用JS小提琴完成了

这就是你想要的效果吗


CSS:

Javascript:

$(function() {

    $('.toggle-nav').click(function() {
        $('nav').slideToggle();
    });

});

我不建议您出于响应的原因更改容器的大小，因为容器中的所有元素都会受到影响，并且您可能会遇到许多布局问题

但无论如何，如果您能确保所有内容都经过良好编码并符合要求，您可以看到您正在添加将主容器翻译到右侧的类
show nav
，您需要的是使用
calc（）
，改为修改宽度
width
：

在整个页面上运行代码段


$（函数（）{
$（'.toggle nav'）。单击（函数（）{
$（'body'）.toggleClass（'show-nav'）；
返回false；
});
});
nav{
宽度：700px；
身高：100%；
位置：固定；
排名：0；
左：0；
}
.网站包装{
溢出：隐藏；
宽度：100%；
身高：100%；
}
.推包{
边框：1px纯红；
过渡：所有1.2s线性；
宽度：100%；
}
.显示导航。推送包裹{
边框：1px纯绿色；
宽度：计算（100%-700px）；
转换：转换（700px，0）；
}
身体{
背景：#e3；
}
a{
过渡：所有300毫秒缓解；
}
导航{
背景#2b343f；
文本对齐：居中；
-webkit盒阴影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
-moz盒阴影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
盒影：插入-1.5em 0 1.5em-0.75em rgba（0,0,0,0.5）；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；
}
海军ulli a{
显示：块；
文字装饰：无！重要；
高度：60px；
线高：60px；
字号：18px；
颜色：#fff；
}
导航ulli a：悬停{
背景：#4efff；
颜色：#000；
}
文章{
位置：相对位置；
最小高度：1500px；
背景：#e3；
z指数：9；
宽度：100%；
}
第h1条{
文本对齐：居中；
保证金：0；
}
第p条{
字体大小：20px；
线高：30px；
边缘底部：40px；
}
第a.1条-nav{
位置：绝对位置；
字体大小：25px；
颜色：rgb（255、139、139）；
排名：0；
左：0；
背景：#444；
宽度：60px；
高度：60px；
线高：60px；
文本对齐：居中；
}





<