問題タブ [off-canvas-menu]

Zurb Foundation の Sticky Top Bar と Off Canvas の組み合わせと、ホバー時のミニカート divの使用に問題があります。

アイコンの上にカーソルを合わせるとミニカート div が表示されるようですが、それは基礎から展開された行で覆われており、ページが 1 ピクセル上に移動したときに展開された行の上にのみ表示されます。

URL はhttp://dev.turnerandlast.com/です。

ajaxスクリプトをロードした結果として、javascriptを使用してオフキャンバス領域を閉じたいです。

ドキュメントには記載されていますが、何が$('#element').foundation('close', cb);何であるかについての説明はあまりありません#element: cb/

#elementととは何cbですか? どのようにプログラムで例を閉じますか?

SCSS の代わりに CSS を使用して Foundation 6 で Web サイトを構築しています。小さな画面でレスポンシブなオフキャンバス ドリルダウン メニューを使用しています。デフォルトでは、オフキャンバス メニューの幅は 250px です。

問題: 代わりに、これをブラウザ ウィンドウの全幅にしたいと考えています。

幅の設定

.off-canvas.position-right widthJavaScript を使用して、 をウィンドウの幅に動的に設定し、ウィンドウrightの負の幅に設定しました。.off-canvas .drilldown max-widthまた、ウィンドウの幅に設定しました。

これはうまく機能します。これが私がやった方法です：

この部分には満足していますが、問題の半分しか解決していません。

オフキャンバスの移動

メニューの幅を処理することに加えて、 を.is-open-right使用してすべてを -250px 移動していますtransform: translateX()。

関数に次の行を含めて、transform: translateX()値をウィンドウの負の幅に設定しようとしました。

しかし、これはうまくいきませんでした。ウィンドウがロードされたときに.off-canvas-wrapper-innerクラスがないという事実に関係していると思います。.is-open-rightこのクラスは、ハンバーガー トグル ボタンをクリックした後に動的に追加されます.menu-icon。そこで、clickイベントリスナーを追加しようとしましたが、まだ機能しません。

これが私のJSコード全体です。

どこが間違っているのでしょうか?

必ずしも私のためにソリューションをコーディングする人を探しているわけではありませんが、.is-open-right translateX値を設定する方法についてのフィードバックや指示は非常に役立ちます。

プロジェクト コード全体は次のとおりです: https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1
ライブ デモは次のとおりです: https://paulshryock.github.io/paulshryock/

ブートストラップ ナビゲーションに offcanvas を追加しようとしています。レスポンシブは完全に機能しますが、デスクトップ解像度を試してもドロップダウン メニューが機能しません。

問題は「bootstrap.offcanvas.js」にあるようです。

「bootstrap.offcanvas.js」を削除すると動作します。

この問題を解決するアイデアはありますか?