/ / Foundation 6 Off-Canvas kann nicht vom Bower-Paket ausgelöst werden - zurb-foundation

Foundation 6 Off-Canvas kann nicht vom Bower-Paket ausgelöst werden - zurb-foundation

Ich habe gerade angefangen, Foundation 6 aus dem Bower "Foundation-Sites" -Paket zu testen, und während die meisten Foundation-Module, die ich getestet habe, funktionieren, kann ich immer noch nicht das Off-Canvas-Menü auslösen.

Ich habe versucht, jquery.js für jquery.min.js auszuwechseln, habe versucht, Bower-Pakete mit cnd-Links ohne Wirkung zu ersetzen, und ich habe viele Codebeispiele im Netz kopieren lassen, aber ich habe noch, dass dies funktioniert.

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 wird der HTML-Code von der Foundation-Site kopiert.

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

Fügen Sie dann den Umschaltknopf hinzu

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

Ich starte dann $ (Dokument).foundation () in der Konsole, aber die Schaltfläche reagiert nicht. Wenn es von Bedeutung ist, benutze ich einen benutzerdefinierten MEAN-Stack mit Angular routing und pm2-Server unter Ubuntu 16.04, obwohl ich auch in einer einfachen HTML-Datei und auf Codepen versucht habe und nicht zur Arbeit kommen kann. Ich habe versucht zu entfernen foundation.offcanvas.js / foundation.core.js und die util-Skripte funktionieren aber immer noch nicht. Hier ist der Codepen mit nur jquery und foundation.min.js geladen - http://codepen.io/rawiki/pen/eZboXB.

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

Antworten:

1 für die Antwort № 1

Es sieht so aus, als ob im Bereich für die Seiteninhalte nichts vorhanden ist. Daher wird die Höhe von "off" auf "0" gesetzt, wenn die Höhe des Seiteninhaltsbereichs festgelegt oder etwas Inhalt hinzugefügt wird, wird das Problem behoben.

Hier ist der Codepen, ich habe gerade die Höhe hinzugefügt

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