web-dev-qa-db-ja.com

Zurb Foundation5トグルトップバーが機能しない

RailsプロジェクトをZurbFoundation 5をテストするように切り替えたところ、トグルトップバーメニューが機能しなくなりました。

ビューポートが小さい場合、トップバーのメニュー項目が消え、以前と同じようにメニューアイコンが表示されますが、メニューアイコンをクリックしても何も起こりません。

トップバーメニューを表示するための次のコードがあります。

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"></li>
    <li class="toggle-topbar menu-icon">
      <a>{href: "#"}
        <span>Menú</span></a>
    </li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li>
        <a class="i fi-home">{href: "/ui/home"}
          &nbsp;Inicio</a></li>
      <li>
        <a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
      <li>
        <a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
      <li>
        <a>{href: "/ui/blogs"} Noticias</a></li>
    </ul>
    <ul class="right">
      <li>
        <a>{href: "#"}
          <i class="fi-lock"></i>
          &nbsp;Club TastaVi</a></li>
    </ul>
  </section>
</nav>

これは私のグリッドに含まれているトップバーメニューです。

zurb-foundation
21
Alex Bibiano

問題はFoundation.topbar.jsファイルにあるようです。コードの次のセクション

breakpoint : function () {
        return matchMedia(Foundation.media_queries['medium']).matches;
    }

に変更する必要があります

breakpoint : function () {
        return !matchMedia(Foundation.media_queries['topbar']).matches;
    }
5
user1625066

トップバーでも同じ問題がありました。 zurbsコードを私のものと比較した後、私は違いに気づきました。

<nav class="top-bar" data-topbar>

データトップバーがありませんでした。その鉱山のトップバーを追加した後、正しく動作し始めました。

15
Kcrow

参考までに、トップバーにはスクロールを中断する別のバグがあります。 foudation.topbar.jsの38行目を次のように変更する必要があります。

self.settings.stick_topbar = topbar;

に

self.settings.sticky_topbar = topbar;

これは5.0.3リリースで修正されましたが、昨夜の時点で、FoundationWebサイトは引き続き5.0.2を提供していました。

2
DanHeidel

これがあなたがそれを機能させるために必要な最小限のものです...私は$(document).foundation(); ..を欠いていました.

<html>
<head>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>


<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Mobile Parent Links</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section" style="left: 0%;">
        <ul class="left">
            <li class="has-dropdown not-click"><a href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a>

                <ul class="dropdown">
                    <li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
                    <li class="parent-link show-for-small">
                        <a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js'></script>

<script>
$(document).ready(function() {
    $(document).foundation();
});
</script>

</body>
</html>
2
Nigel Sheridan-Smith

私は昨日の夕方からその問題を経験し、そのようなスレッドをすべて調べましたが、実際に役立つトリックはありませんでした。最後に、問題の解決に役立った手順は次のとおりです。

  1. 更新されたComplete Foundationを再ダウンロード 。
  2. 以前に欠落していたhtmlmeta（viewport）タグが含まれています。

  3. 私はこのように私のページにファイルを含めています：

    _<link rel="stylesheet" href="/css/foundation/foundation.css"/>_
    _<link rel="stylesheet" href="/css/foundation/app.css"/>_
    _<meta name="viewport" content="width=device-width, initial-scale=1.0"/>_
    _<script src="/js/jquery-1.11.2.min.js"></script>_
    _<script src="/js/foundation/foundation.js"></script>_
    _<script src="/js/foundation/foundation.topbar.js"></script>_

  4. 以下のように、jsではなくjqueryでFoundation関数を呼び出しました。
    _<script>_
    $(document).ready(function() {
    $(document).foundation();
    _});_
    _</script>_

0
adi

Foundation5.1.1でも同様の問題が発生しました。上記の提案された修正はどれも私には適用できませんでした（私はすでにdata-topbar属性を持っていて、breakpoint関数はこのリリースのFoundationですでに更新されています）。 MacOS上のFirefoxで開発中のコードをテストしています。私のJavascriptインクルードは本文の最後にあります。

私の場合、Zurbをバージョン5.2.1にアップグレードすることで問題が修正されました。

0
Graham Klyne

私は以前に同じ問題を抱えていました。私にとっては、topbar.jsを本体の内部とfoundation.jsの下に含めると機能します。

だから、代わりに

<head>
   <script src="../js/foundation.js"></script>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</head>

このようにtopbar.jsを本体の中に入れてみてください

<head>
   <script src="../js/foundation.js"></script>
....
</head>

<body>
   <script src="../js/foundation/foundation.topbar.js"></script>
....
</body>
0
bagz_man