Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

Question

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

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

<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/

Answer 1

为了让 off-canvas 部分默认显示在更宽的屏幕上，您需要将 "reveal-for" class 添加到 off-canvas 区域，例如 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>

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

要调整 off-canvas 区域的宽度，您需要覆盖默认的 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 class 来调整 small-screen off-canvas 元素的宽度，如下所示：

.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

Foundation vertical (Split Layout) Off-Canvas 覆盖整个屏幕且仅在移动屏幕上

Foundation vertical (Split Layout) Off-Canvas covers entire screen and on mobile screen only

html

css

zurb-foundation

zurb-foundation-6