尝试制作一个将主要内容推离屏幕的移动画布滑出答案

【问题标题】：Trying to make a mobile off-canvas slideout that pushes the main content off the screen尝试制作一个将主要内容推离屏幕的移动画布滑出
【发布时间】：2014-06-18 02:56:54
【问题描述】：

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

我在这里使用示例作为起点：

http://codepen.io/chriscoyier/pen/umEgv

作者创建了一个导航 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 的位置设置为“固定”，因此它不能“推送”页面换行 div，因为它超出了文档的正常流程？如果是这样，我该如何解决？

【问题讨论】：

标签： css html sass

【解决方案1】：

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

http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

这是迄今为止我见过的关于该主题的最清晰的教程。这是结果的工作演示：http://codepen.io/ncerminara/full/KJjiD/

编辑

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

【讨论】：

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

【解决方案2】：

您应该为位置设置动画，而不是为元素的宽度设置动画 - 当然，您必须使其绝对定位。你也可以弄乱填充动画或其他东西。然后在溢出屏幕后将其隐藏。

现在，没有任何溢出，所以这就是为什么它不起作用。无论如何，它只是减少了元素相对于屏幕的宽度。

不要忘记更改过渡声明，可能会全部使用。

下面的代码，只留下我用那支笔改变的东西

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%;
}

显然不完全建议使用 overflow: hidden 在整个页面上，但我只是添加了它作为演示的快速修复。

【讨论】：