問題タブ [zurb-foundation-6]

Foundation 6 を使用したことはなく、それを基に Web サイト全体を構築した後も、トップバーのドロップダウン メニューのリンクが機能しないことに気付きました。私はどこでもこの質問に対する答えを探しましたが、非常に多くの異なる答えを見てきました. より新しいバージョンのfoundation.min.jsをダウンロードするように言う人もいれば、より新しいバージョンのfoundation.topbar.jsをダウンロードするように言う人もいれば、この問題を解決できないと考える人もいます。

以下はコードの一部です (私のウェブサイトはhttp://littleeeternities.comにありますので、リンクが「機能していない」ことの意味を自分の目で確かめてください)。

トップバー コード

追加したスクリプトはこちら

ファイル app.js には、次の JavaScript が記述されています。

これを修正するためにこれまであらゆる方法を試してきましたが、今は立ち往生しています。どんな答えでも大歓迎です！:)

Foundation のイコライザー プラグインが DOM の準備ができた直後に起動するという問題があります。一部の TypeKit フォントを読み込んでいますが、読み込みに数ミリ秒かかりますが、フォントが読み込まれる前にイコライザー プラグインが起動しています。

何が起こるかというと、フォールバック フォント (私の TypeKit フォントとは高さが異なります) が非常に短い時間 (おそらく 50 ミリ秒) 表示されます。フォールバック フォントが表示されているときに、イコライザーが div に高さを適用しています。フォールバック フォントは背が高く、場合によっては、テキストの行が 2 行に分割されます。

次に、TypeKit フォントが読み込まれると、div のサイズは変更されません。フォールバック フォントが表示されたときに高さが調整されたため、高さが高すぎます。

それで... TypeKit フォントの読み込み後にイコライザー プラグインを起動する方法はありますか? また、リフロー時にプラグインを起動する方法が最善かもしれないことを見てきましたが、Foundation 6 のリフローについては何も見ていません。たった 5 です。

次の非常に基本的な例では、スイッチが機能し、適切にスタイル設定されています。foundation.css のバージョンを 5.5.2 から 6.0.5 に変更しただけでは、トグル スタイルが失われます。Foundation 6.0 でスイッチが機能しないのはなぜですか??? 繰り返しますが、スタイル シートを「https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.5/css/foundation.css」に変更すると、機能しなくなります。

Gulp と Sass を使用して Foundation 6 をテストする新しいプロジェクトをセットアップしましたが、まったくコンパイルされないようです。このトピックに近い別の投稿がありますが、私は個人的に、受け入れられた答えは正しい解決策ではないと考えています-それにはすべてのコンポーネントが含まれており、実際にはZurbが提案するものとは反対です(この問題を参照してください: https://github.com /zurb/foundation-sites/issues/7537 )。とにかく...

Bower から Foundation 6.1.1 をインストールし、gulp-sass関数へのパスをgulpfile.js次のように追加しました。

私のtheme.scssは次のとおりです。

scss をコンパイルしてもエラーは発生しませんが、出力はtheme.css次のようになります。

コメントが出力されているため、ファイルにヒットしているように見えますが、foundation.scss.

この Web サイトhttp://hlb-mann-judd.businesscatalyst.comで Zurb Foundation 6 フレームワークを使用しています。第 2 層の階層にあるページでモバイル ナビゲーションが開かないことを除けば、すべてが良好です。問題が発生するリンクは次のとおりですhttp://hlb-mann-judd.businesscatalyst.com/software/myob モバイル ナビゲーション バーは表示されますが、機能しなくなりました

これらのページでは、第 2 層のパス名があるという事実以外に違いはなく、第 2 層のページにすべての関連ファイルの正しいパス名があることを確認したので、それが問題を引き起こしているわけではありません (私はそれを理解していますが)。何らかの関係があります）。これを修正するために何が必要かについて誰かが私にアドバイスできるなら、私はそれが山積みであることを感謝します.

関連するコードは次のとおりです。

このトピックに関する他の多くの投稿とは異なり、私のタイトル バーはすべてのページで問題なく機能しますが、1 つだけ:

http://www.pcvsoftware.net/christlutheran/contact.html

小さい画面よりも大きい画面では、水平トップ メニューが表示されます。私の電話では、トグルされたタイトル バーが表示され、ハンバーガー メニュー アイコンをタップすると、上部のメニュー バーが垂直のドロップダウン メニューとして表示されます (上記のリンク先のページを除く)。コードはすべてのページで同じです。誰かがこれを見て、何が間違っているかを理解できますか? タイトル バーを固定したいのですが、なぜこの問題が発生したのかがわかるまで、その努力をすることはできません。Google Maps API の JavaScript との干渉かと思いましたが、コメントアウトしても問題ありません。前もって感謝します。

Foundation 6 に問題があります。私は少し初心者で、大学でのプロジェクトのために開発している Web ページにそれを適用しようとしています。Zurb の Web ページからトップバー コードを直接コピーしてプロジェクトに適用しましたが、まったく機能しません。適用したコードは次のとおりです。

問題は、メニューが折りたたまれず、デバイス画面が小さい場合を除き、メニューが表示されている間は非表示になると予想されるトップバーが常に表示されることです。

前もって感謝します！

パソコン画面

モバイル画面

ずっとサイトのトップにくっつくメニューを作ろうとしている。zurb.foundation のドキュメントに従いましたが、.sticky は常に同じ予期しない方法で動作します。それとも、明らかなことがわかりませんか？

ここで再構築を確認してください: http://codepen.io/mister-hansen/pen/wMgrPm

サイトが下にスクロールされ、最初のビューポートの正確な高さに達すると、スティッキー プラグインが要素 .stickyis-stuck is-at-topを次のように変更して.is-anchored .is-at-bottomいるため、.sticky が消えます。

ありがとうございました。

UPDATE ドキュメントの最初の部分：foundation.zurb.com/sites/docs/sticky.htmlは、説明されている動作について説明しています。デフォルトの body { height: 100% } css のため、body は max で正確に解釈されます。ビューポートの高さ。

したがって、私の場合の解決策は、a) body の高さを auto でオーバーライドすることです。しかし、より良いb）意図した固定ヘッダーにスティッキー機能を使用しないでください。

Foundation 5 のビルディング ブロックが Foundation 6 で壊れます。回避策を知っている人はいますか? コードを書き直そうとしましたが、何かが足りないと思います。ありがとうアドルフォ

これは基礎 5 コードです:

これは私が試したことです：