基礎垂直（分割佈局）非帆布覆蓋整個屏幕並僅在移動屏幕上

我想創建一個使用基礎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

以及需要媒體查詢，因爲它也適用於小屏幕，它應該只適用於>中等。 –

基礎垂直（分割佈局）非帆布覆蓋整個屏幕並僅在移動屏幕上

回答

相關問題