基础垂直（分割布局）非帆布覆盖整个屏幕并仅在移动屏幕上

我想创建一个使用基础6的非帆布画布;我的想法是，我有两个基本的专栏应用程序，然后我试图隐藏在左边的那个只在屏幕很小时使用非帆布效果，但首先我需要得到这个工作：col 2 get show 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/

来源

2016-04-17 victor sosa

我想要实现关闭帆布概念http://www.lukew.com/ff/entry.asp?1514解释 –

为了得到关帆布部分默认情况下，在更宽的屏幕上显示，您需要添加一个“透露，对于”类转给您的帆布面积，如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。所以，在你的CSS，你用它来覆盖基金会的样式（所以你需要基金会的CSS加载后它），你会做这样的事情：

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

可以调整小画面关闭canvas元素的宽度通过调整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

来源

2016-06-29 17:12:10 hightempo

几乎在那里;首先，我需要50/50的分屏，在这个例子中是20/80，小屏幕上的第二个需要100％的屏幕（就像现在只有右栏是屏幕的100％）。这意味着我只能看到一列，当我点击按钮时，它应该一直移动到左侧并隐藏右侧列，然后单击另一个按钮，一路返回到右侧列并隐藏左侧。感谢您的帮助。 –

要调整列的宽度，只需重写默认的Foundation css。没有真正的基础特定问题，只需在检查器中查看DOM元素，然后查看宽度是如何设置的。在这种情况下，您需要覆盖选择器'.position-left.reveal-for-medium〜.off-canvas-content'。我会在我的回答中添加更多的细节来描述这一点。 – hightempo

以及需要媒体查询，因为它也适用于小屏幕，它应该只适用于>中等。 –

基础垂直（分割布局）非帆布覆盖整个屏幕并仅在移动屏幕上

回答

相关问题