Foundation 6 off-canvas-menuは表示されているページを非表示にしません

Question

Foundation 6を使用して小さなビューポート用にキャンバスメニューを作成しています。オフキャンバスメニューの下にある領域の右側には背景の不透明度はありません。

だけで、ブラウザのビューポートの幅に未満640ピクセル（小さなビューポート）のサイズを変更し、左上のハンバーガーのアイコンをクリックして、それをしようとします。

link to website

どのようにすることができます私は、インク透明な黒の色だけではなく、上部と全部？

Answer 1

これは設計によるものだと思いますが、ちょっとしたバグです。

オフキャンバスメニューを開いたときにグレーのオーバーレイの親が画面の高さの100％を占めていて、通常その下に何も表示されず、コンテンツがすべてコンテンツをカバーしていないことがわかりますビューポートから外します。

ラッパーの高さを 'auto'に設定するか、高さの100％値を完全に削除することができます。これに注意する点は、これを行うと、キャンバス以外のメニュー内だけでなく、ビューポート内のすべてのコンテンツがスクロールすることになることです。 JavaScriptで

// This element needs to have the height override 
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-left" data-off-canvas-wrapper="">...</div> 

.off-canvas-wrapper, .off-canvas-wrapper-inner { 
    height: 100% <-- remove this, override it, or set to 'auto'. 
} 

Answer 2

、あなたはopened.zf.offcanvasイベントをリッスンし、手動でoff-canvas-contentクラスを持っているタグに灰色のオーバーレイを追加することができます。逆に、closed.zf.offcanvasイベントを聞き、発生時に追加したCSSを削除してください。

 <!-- Close button --> 
     <button class="close-button" aria-label="Close menu" type="button" data-close> 
      <span aria-hidden="true">&times;</span> 
     </button> 

     <!-- Menu --> 
     <ul class="vertical menu"> 
      <li><a href="#">Foundation</a></li> 
      <li><a href="#">Dot</a></li> 
      <li><a href="#">ZURB</a></li> 
      <li><a href="#">Com</a></li> 
      <li><a href="#">Slash</a></li> 
      <li><a href="#">Sites</a></li> 
     </ul> 

     </div> 

     <div class="off-canvas-content" data-off-canvas-content> 
     <!-- Page content --> 
     </div> 
    </div> 
    </div> 
</body> 

その後：

$('.off-canvas-wrapper').on('opened.zf.offcanvas', function() { 
    $('.off-canvas-content').addClass('grey-out'); 
}); 
$('.off-canvas-wrapper').on('closed.zf.offcanvas', function() { 
    $('.off-canvas-content').removeClass('grey-out'); 
}); 

grey-outクラス：

HTMLで

：財団のドキュメントからのサンプルコードを使用して

.grey-out { 
    background: rgba(60,60,60,0.75) !important; 
    z-index: 1000; 
} 

私はこれをテストしませんでしたが、あなたはそのアイデアを得ました。