Jquery 屏幕外的正文内容

当我点击[菜单按钮]显示[侧边菜单栏]时，我的身体内容将从屏幕上消失。你能帮我吗

这是我的密码

在

Html文件：

<div class="contenido">
        <h1 class="menu-bar">Icono</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ex iste, quod laboriosam, maiores alias, ducimus voluptate fuga soluta provident quae. Iure tempora, nemo doloribus, harum odit sequi nobis officia!</p>
      </div>

谢谢你的帮助。

您的内容绝对位于100%宽度。
Transform

translateX（250px）

只会将其移动250px，但不会改变其宽度。
改为：

.abrir{
    /*transform: translateX(250px); No. */
    width: calc(100% - 250px); /* ADD THIS */
}

及

PS：坦白说。。。看到文字换行，因为有些动画很难看。。。我无法决定我最喜欢什么，但在我看来，即使文本部分无法阅读，也会赢得胜利

.abrir{
    /*transform: translateX(250px); No. */
    width: calc(100% - 250px); /* ADD THIS */
}

.contenido{
  right: 0; /* And this! */
}