Foundation 6 off-canvas-Menü "nicht" sichtbare Seite "ausblenden"

Question

Ich erstelle ein Off-Canvas-Menü für kleine Viewports mit Foundation 6 und ich kann den gesamten sichtbaren Seitenbereich nicht überlappen. Der Bereich rechts unterhalb des Off-Canvas-Menüs hat keine Hintergrundopazität.

Um zu versuchen, es die Größe nur das Browser-Ansichtsfenster kleiner als 640px (kleines Bildfensters) Breite und klicken Sie auf dem Burger-Symbol oben links.

link to website

Wie kann ich Tinte das Ganze mit transparenter schwarzer Farbe anstatt nur den oberen Teil?

Answer 1

Ich denke, das ist von Design, aber ein bisschen Buggy.

Das übergeordnete Element der grauen Überlagerung nimmt 100% der Bildschirmhöhe auf, wenn das Off-Canvas-Menü geöffnet wird. Normalerweise wird nichts darunter angezeigt, um zu erkennen, dass nicht der gesamte Inhalt abgedeckt wird aus dem Bildfenster.

Sie können die Höhe des Wrappers auf 'auto' setzen oder den 100% -Wert für die gesamte Höhe entfernen. Der Nachteil dabei ist, dass wenn Sie dies tun, der gesamte Inhalt im Ansichtsfenster geblättert wird, nicht nur das, was sich im Off-Canvas-Menü befindet.

// 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

Mit Javascript können Sie für opened.zf.offcanvas Ereignis hören und die graue Overlay mit dem Tag manuell hinzufügen, die die off-canvas-content Klasse. Hören Sie umgekehrt auf closed.zf.offcanvas Ereignis und entfernen Sie die CSS, die Sie hinzugefügt haben, wenn es ausgelöst wird.

Mit dem Beispielcode von Stiftung docs:

Mit HTML:

 <!-- 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> 

Dann:

$('.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 Klasse:

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

Ich habe das nicht getestet, aber Sie bekommen die Idee.