Foundation 6 Off-Leinwand von Bower Paket auszulösen versagt

Question

ich gerade angefangen habe Foundation Prüfung 6 aus dem Paket ‚Stiftung-sites‘ Bower und während die meisten der Stiftung Module ich getestet habe zu funktionieren scheint ich bin immer noch nicht in der Lage um das Off-Canvas-Menü auszulösen.

Ich habe versucht, jquery.js für jquery.min.js Auslagern, versuchten Bower Pakete mit CND Links zu keinem Effekt zu ersetzen und ich habe kopieren eingefügt zahlreiche Code-Beispiele auf dem Netz, aber ich bin noch diese haben Arbeit.

Dies sind die Skripte, die geladen werden

<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/what-input/what-input.js"></script> 
<script src="bower_components/foundation-sites/dist/foundation.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.offcanvas.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.core.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.mediaQuery.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.triggers.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.util.motion.js"></script> 

Hier ist der HTML-Code aus der Stiftung Site kopiert ist.

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

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

sind dann auf den Schalter

<button type="button" class="button" data-toggle="offCanvas">Open Menu</button> 

ich dann $ (document) .foundation() in der Konsole ausführen, aber die Schaltfläche bleibt nicht mehr reagiert. Wenn es wichtig ist, benutze ich einen benutzerdefinierten MEAN-Stack mit Angular-Routing und PM2-Server unter Ubuntu 16.04, obwohl ich es auch in einer einfachen HTML-Datei und auf Codepen ausprobiert habe und nicht zur Arbeit kommen kann. Ich habe versucht, foundation.offcanvas.js/foundation.core.js und die util-Skripte zu entfernen, funktioniert aber immer noch nicht. Hier ist der Codepen mit nur jquery und foundation.min.js geladen - http://codepen.io/rawiki/pen/eZboXB.

Was fehlt mir? Muss ich eine Foundation.OffCanvas-Instanz in JavaScript erstellen, bevor dies funktioniert?

Answer 1

Es sieht aus wie nichts auf der Seite Content-Bereich ist somit wird es offcanvas' Höhe auf 0, Einstellung der Höhe der Seite Inhaltsbereich oder das Hinzufügen einige Inhalte wird es zu beheben, um das Problem zu setzen.

hier ist die codepen, ich die Höhe

gerade hinzugefügt

.off-canvas-content{ 
    height:300px; 
}