Question

我正在尝试使用基础6创建一个非画布;我的想法是我有两个基本列应用程序，然后我尝试隐藏左边的那个只有当屏幕很小时使用非画布效果，但首先我需要让它工作：col 2得到完整的显示屏幕宽度和第一列应仅在屏幕上激活。在桌面屏幕上应该只在一个屏幕上显示两列。

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

<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

为了让画布上的部分默认显示在更宽的屏幕上，你需要添加一个＆＃34; reveal-for＆＃34;你的画布外区域，如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的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

基础垂直（分割布局）Off-Canvas仅覆盖整个屏幕和移动屏幕

1 个答案: