身体内容超出屏幕

Question

当我点击[菜单按钮]显示[旁边菜单栏]时，我的身体内容离开了屏幕。你能救我吗？

这是我的代码。

在jsfiddle。

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>

Js文件：

$('.menu-bar').on('click', function() {
    $('.contenido').toggleClass('abrir');
});

感谢您的帮助。

Answer 1

jsFiddle demo

您的内容绝对位于 100％宽度。
变换translateX(250px)只会将其移动250px，但不会更改它的宽度。
相反：

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

和

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

PS：坦率地说......由于某些动画很难看，所以看文字包装......我无法决定我最喜欢什么，但是translateX（就像它一样），即使文字部分不可读也是如此，赢得我的眼睛。