Css 尝试制作一个移动的离开画布的滑动，将主要内容推离屏幕

我正在开发一个演示程序，当切换菜单按钮时，它将使用纯CSS将内容从屏幕上推出。这将用于滑动式移动导航菜单

我使用以下示例作为起点：

作者创建了一个导航div和一个内容div。最初，导航div的宽度为0，而内容div的宽度为100%，如下所示：

.page-wrap {
  float: right;
  width: 100%;
  transition: width 0.3s ease;
}

.main-nav {
  position: fixed;
  top: 0;
  width: 0;
  height: 100%;
  background: #3B3B3B;
  overflow-y: auto;
  transition: width 0.3s ease;
}

然后，当您单击菜单切换按钮时，他将宽度尺寸分别更改为20%和80%

#main-nav:target {
  width: 20%;
}
#main-nav:target + .page-wrap {
  width: 80%;
}

这一切都很好，但它没有将.page wrap div从屏幕上推出，而是缩小了宽度。这看起来真的很奇怪，我宁愿把它从屏幕上推下来。我尝试将overflow-x:hidden添加到正文中，并删除.page wrap部分的显式宽度，但没有成功

.page-wrap {
      float: right;
      transition: width 0.3s ease;
    }


body {
  overflow-x: hidden;
}

#main-nav:target {
  width: 40%;
}
#main-nav:target + .page-wrap {
  .open-menu {
    display: none;
  }
  .close-menu {
    display: block;
  }
  .main-header {
    width: 80%;
    left: 20%;
  }
}

---

是因为#main nav的位置设置为“fixed”，因此无法“推送”换页div，因为它超出了文档的正常流程吗？如果是这样的话，我该如何解决这个问题？

不应该设置元素宽度的动画，而应该设置位置的动画-当然，您必须将其设置为绝对位置。你可以随意设置填充物的动画或其他东西。然后，一旦溢出被推离屏幕，就隐藏它

现在，没有任何溢出，所以这就是为什么它不起作用。它只是缩小了元素的宽度，相对于屏幕而言

别忘了也要更改转换声明，很可能只是随大流

下面的代码，只留下了我从那支笔换下来的东西

html, body { overflow: hidden; }

.page-wrap {
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.main-nav {
  overflow: hidden;
  transition: all 0.3s ease;
}

#main-nav:target + .page-wrap {
  left: 20%;
  width: 100%;
}

---

显然，在整个页面上隐藏溢出：并不是完全可取的，但我只是添加了一个快速修复来演示。

为了获得更好的性能，您应该在可用时使用CSS转换。本教程使用了一种与Chris Coyiers类似的技术，但是有更多的细节，一些针对旧浏览器的回退，等等

这是迄今为止我所看到的关于这个主题的最清晰的教程。下面是结果的工作演示：

编辑

---

在方法的差异上添加更多细节。在我上面链接的文章中，您将隐藏的导航元素定位在屏幕外的负边距处。当你激活一个导航区域时，你不是在改变它们的边距，而是在一定程度上移动整个画布，以暴露导航，并隐藏过程中的部分主要内容。

回答得很好，你链接到的教程也很棒！我们将在这里使用类似的方法。谢谢嘿，是我！很高兴它有帮助！