Javascript 推送菜单-如何推送车身

我有一个向右打开的菜单。我的问题是，我想在打开菜单后调整主体的大小。菜单是300像素宽，我想调整身体的大小，以占据屏幕的其余部分。我看到了一些例子，但它们所做的只是移动身体，使身体的一部分不可见并离开屏幕。你可以看到我的例子

登录！

``

添加

  margin-left: 300px;

到

---

在你的密码笔里对我有用。保证金会把一切都推到一边。

正如评论中提到的，这是你可以做的。打开菜单时，在HTML

正文中添加一个类

，并添加一个与菜单宽度相等的

右填充


$（“.hamburger”）。在（“单击”，函数（）上）{
$（“.hamburger”）.toggleClass（“处于活动状态”）；
//将菜单活动类添加到文档正文
$（'body'）.toggleClass（'menu-active'）；
$（“.side nav”）.toggleClass（“隐藏”）；
if（$（“#side”）.hasClass（“处于活动状态”））{
$（“#main”）.toggleClass（“隐藏”）；
}else if（！$（“#侧”）.hasClass（“处于活动状态”））{
$（“#main”）.toggleClass（“隐藏”）；
}
});
html，
身体{
填充：0；
保证金：0；
身高：100%；
背景色：黑色；
框大小：边框框；
}
按钮：焦点{
大纲：0；
}
a{
颜色：#fff；
}
a:悬停{
颜色：#fff；
文字装饰：无；
}
.侧导航{
位置：绝对位置；
背景颜色：灰色；
宽度：300px；
身高：100%；
z指数：1；
右：0；
}
.打开菜单侧{
位置：相对位置；
显示：块；
高度：80px；
宽度：100%；
文本对齐：居中；
浮动：对；
}
.侧面导航{
位置：相对位置；
显示：内联块；
宽度：100%；
身高：100%；
列表样式：无；
字号：28px；
颜色：#fff；
}
.街区{
高度：40px；
}
标题{
高度：80px；
背景色：#fff；
}
.品牌{
显示：内联块；
}
.img菜单img{
高度：50px；
宽度：50px；
边界半径：50%；
边框：实心1px黑色；
浮动：左；
}
.隐藏{
位置：绝对位置；
右：-300px；
}
#推动{
位置：相对位置；
}
#主要{
浮动：对；
}
.汉堡包{
填充：15px 15px；
身高：100%；
显示：内联块；
光标：指针；
过渡属性：不透明度，过滤器；
过渡时间：0.15s；
过渡时间函数：线性；
字体：继承；
颜色：继承；
文本转换：无；
背景色：透明；
边界：0；
保证金：0；
溢出：可见；
}
.汉堡包：悬停{
不透明度：0.7；
}
.汉堡包盒{
宽度：40px；
高度：24px；
显示：内联块；
位置：相对位置；
}
.汉堡内胆{
显示：块；
最高：50%；
页边顶部：-2px；
}
.汉堡内胆，
.汉堡包内胆：：以前，
.汉堡内胆{
宽度：40px；
高度：4px；
背景色：#000；
边界半径：4px；
位置：绝对位置；
过渡性质：变换；
过渡时间：0.15s；
过渡时间功能：轻松；
}
.汉堡包内胆：：以前，
.汉堡内胆{
内容：“；
显示：块；
}
.汉堡内胆{
顶部：-10px；
}
.汉堡内胆{
底部：-10px；
}
.汉堡--挤压.汉堡内胆{
过渡时间：0.075s；
过渡计时功能：立方贝塞尔（0.55,0.055,0.675,0.19）；
}
.汉堡包--挤压.汉堡包内部：：之前{
过渡：顶部0.075s 0.12s缓变，不透明度0.075s缓变；
}
.汉堡包--挤压.汉堡包内部：：之后{
过渡：底部0.075s 0.12s轻松，变换0.075s三次贝塞尔（0.55,0.055,0.675,0.19）；
}
.hamburger--squeak.is-active.汉堡内胆{
变换：旋转（45度）；
过渡延迟：0.12s；
过渡计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
}
.hamburger--squeak.is-active.hamburger-inner:：before{
排名：0；
不透明度：0；
过渡：顶部0.075s缓变，不透明度0.075s 0.12s缓变；
}
.hamburger--squeak.is-active.hamburger-inner:：after{
底部：0；
变换：旋转（-90度）；
转换：底部0.075s轻松，转换0.075s 0.12s三次贝塞尔（0.215,0.61,0.355,1）；
}
.你好，短信{
文本对齐：右对齐；
颜色：#fff；
字体大小：22px；
}
/*当菜单处于活动状态时，向右添加填充*/
body.menu-active{
右侧填充：300px；
}



登录！
你好

将paddin右键添加到与菜单宽度相同的菜单overflow-x:hidden；如果没有任何水平滚动动画
  margin-left: 300px;

   .side-nav-ul