Foundation 6 off-canvasがBowerパッケージから起動できない

Question

BowerのFoundation-sitesパッケージからFoundation 6をテストし始めました。テストしたFoundationモジュールのほとんどが動作していますオフキャンバスメニューをトリガーします。

私はjquery.min.jsのjquery.jsを交換してみましたが、効果のないようにbowerパッケージをcndリンクで置き換えようとしました。多数のコード例をネットに貼り付けましたが、まだこれを持っています作業。

これらは、ここで

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

を読み込まれているスクリプトです土台サイトからコピーしたHTMLです。

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

その後、私は、コンソールでの$（文書）.foundation（）を実行しますが、ボタンが応答しないままトグルボタン

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

が含まれます。それが重要であれば、私は平凡なhtmlファイルとcodepenで試してみたが、動作させることはできないが、角度ルーティングとpm2サーバをUbuntu 16.04上で実行している。私はfoundation.offcanvas.js/foundation.core.jsとutilスクリプトを削除しようとしましたが、まだ動作しません。ここにjqueryとfoundation.min.jsがロードされたコードペーンがあります - http://codepen.io/rawiki/pen/eZboXB。

私には何が欠けていますか？これは動作する前に、JavaScriptでfoundation.OffCanvasインスタンスを作成する必要がありますか？

Answer 1

ページのコンテンツ領域に何もないように見えるため、offcanvasの高さを0に設定してページコンテンツ領域の高さを設定するか、コンテンツを追加することで問題が解決されます。ここ

がcodepenですが、私はちょうど私が今、おかげで作業それを持っている偉大な高さに

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