基础垂直（拆分布局）Off-Canvas 覆盖整个屏幕和仅在移动屏幕上答案

【问题标题】：Foundation vertical (Split Layout) Off-Canvas covers entire screen and on mobile screen only基础垂直（拆分布局）Off-Canvas 覆盖整个屏幕和仅在移动屏幕上
【发布时间】：2016-04-17 00:40:55
【问题描述】：

我正在尝试使用基础 6 创建一个画布外；这个想法是我有两个基本的列应用程序，然后我尝试仅在屏幕较小时使用画布效果隐藏左侧的一个，但首先我需要让它工作：col 2 get show to full屏幕的宽度和第一列，这应该只在屏幕上激活。在桌面屏幕上应该只在一个屏幕上显示两列。

我们的想法是要有内容，而不仅仅是基础示例中的菜单。我怎样才能得到描述的效果？

<body>
  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Page1 content -->

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page2 content -->
      </div>
    </div>
  </div>
</body>

检查此代码： https://jsfiddle.net/q1e45fzz/16/

【问题讨论】：

我想实现lukew.com/ff/entry.asp?1514中解释的off canvas概念

标签： html css zurb-foundation zurb-foundation-6

【解决方案1】：

为了让画布外部分默认显示在更宽的屏幕上，您需要在画布外区域添加一个“reveal-for”类，例如reveal-for-medium。试试这个：

    <div class="off-canvas-wrapper">
        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
            <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
                <div class="title-bar-left">
                    <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
                    <span class="title-bar-title">Open sidebar</span>
                </div>
            </div>
            <div class="off-canvas position-left reveal-for-medium" id="offCanvasLeft" data-off-canvas >
                <h3>Side area</h3>
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div id="widemenu" class="top-bar">
                <div class="top-bar-left">
                    Top area
                </div>
            </div>
            <div class="off-canvas-content" data-off-canvas-content>
                <div class="row column">
                    <h3>Main content</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                    <img src="http://placehold.it/2000x3000" alt="" />
                </div>
            </div>
        </div>
    </div>

您可以将任何您想要的内容放入画布外区域。它不必局限于列表、菜单或导航。在上面的例子中，我只是放了一个标题和一段内容。

要调整画布外区域的宽度，您需要覆盖默认的 Foundation CSS。在这种情况下，选择器是.position-left.reveal-for-medium ~ .off-canvas-content。所以在你用来覆盖 Foundation 样式的 CSS 中（所以你需要在 Foundation 的 CSS 之后加载它）你会做这样的事情：

.position-left.reveal-for-medium ~ .off-canvas-content {
  margin-left: 50%;
}

您可以通过调整is-open-left 类来调整小屏幕画布外元素的宽度，如下所示：

.is-open-left {
  transform: translateX(90%);
}

移动这些百分比数字以完全适应您正在寻找的效果。在这两种情况下，这些只是标准的 CSS 覆盖。我鼓励您使用 Chrome 检查器或 Firebug（取决于您使用的是什么）来检查布局中的元素并尝试查找需要覆盖的特定 CSS 选择器。

有关使用检查器的更多信息，请参阅： https://developers.google.com/web/tools/chrome-devtools/ 和： http://getfirebug.com/faq/#Is_there_some_basic_description_of_how_Firebug_works

【讨论】：

快到了；首先我需要>medium 的分割 50/50，在这个例子中就像 20/80 和小屏幕上的 Second 需要是屏幕的 100%（就像现在只有右列是屏幕的 100%）；这意味着我只能看到一列，当我单击按钮时，它应该一直向左移动并隐藏右列，然后单击另一个按钮以返回到右列并隐藏左侧。谢谢你的帮助。
要调整列的宽度，你只需要覆盖默认的Foundation css。没有真正的 Foundation 特定问题，只需查看检查器中的 DOM 元素并查看宽度是如何设置的。在这种情况下，您需要覆盖选择器.position-left.reveal-for-medium ~ .off-canvas-content。我将在回答中添加更多细节来描述这一点。
嗯，需要一个媒体查询，因为它也适用于小屏幕，它应该只适用于 > medium。
是的，您可能需要将一些选择器放入媒体查询中，但您所说的此时您仍然需要完成的只是 CSS。另外，在这种情况下，`is-open-left' 是 Foundation 在画布外区域在屏幕上时通过 JavaScript 添加的类，因此它仅适用于“打开”画布外区域。该特定选择器不需要媒体查询。
谢谢你 XD 你太棒了。我想我现在可以做到。