Foundation 6 Off Canvas，我應該在哪裏放置菜單內容？

我下面基金會6文檔創建關帆布菜單：http://foundation.zurb.com/sites/docs/off-canvas.html Foundation 6 Off Canvas，我應該在哪裏放置菜單內容？

這裏是我做過什麼：

<body> 
    <div class="off-canvas-wrapper"> 
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> 

     <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas> 
     <ul class="vertical menu"> 
      <li>test1</li> 
      <li>test2</li> 
      <li>test3</li> 
      <li>test4</li> 
     </ul> 
     </div> 

     <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas 
      data-position="right"></div> 

     <div class="off-canvas-content" data-off-canvas-content> 
     <div class="title-bar"> 
      <div class="title-bar-left"> 
      <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button> 
      <span class="title-bar-title">Zurb</span> 
      </div> 

      <div class="title-bar-right"> 
      <button class="menu-icon" type="button" data-toggle="offCanvasRight"></button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</body>

但是當我打開菜單，這裏是我得到：

我可以滾動它並看到我的test1/2/3/4，但爲什麼我會得到這個結果呢？

我要的是一樣的東西，我們可以在基礎文檔時看到的「切換關畫布」點擊

難道我把我的表錯了地方？我敢肯定我的框架是最新的，並且我一直都在文檔一步一步，但它不會給儘可能多的信息，我想有

來源

2016-02-27 Charrette

你必須在菜單中右地點和您的示例等同於Foundation 6文檔中提供的示例。

這似乎是一個設計問題，其中關閉畫布菜單的長度取決於內容的大小。由於頁面上沒有內容，菜單的高度與菜單欄相等。

只要填充off-canvas-content，菜單應按預期顯示。

點擊Here進行演示。

來源

2016-02-27 16:12:15 Yass

沒錯，謝謝:) – Charrette

謝謝你分享你的代碼。它與ZURB爲Foundation 6起始頁面的示例略有不同。 ZURB使用「包裝」而不是「包裝」。我改變了我的代碼以匹配你的和瞧！他們的教程是：

http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html

此致：

<div class="off-canvas-wrapper"> 
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

ZURB：

<div class="off-canvas-wrap" data-offcanvas> 
<div class="inner-wrap">

來源

2017-03-09 21:33:44 Lisa

Foundation 6 Off Canvas，我應該在哪裏放置菜單內容？

回答

相關問題