vic*_*osa 5 html css css3 zurb-foundation zurb-foundation-6
我正在尝试使用基础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">×</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/
为了让画布外部分默认显示在更宽的屏幕上，您需要向画布外区域添加一个“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