Zurb Foundation 5 Toggle-Topbar funktioniert nicht - zurb-foundation

Ich habe gerade mein Rails-Projekt gewechselt, um Zurb Foundation 5 zu testen, und jetzt funktioniert das Toggle-Topbar-Menü nicht.

Wenn das Ansichtsfenster klein ist, werden die Menüelemente der oberen Leiste ausgeblendet und das Menüsymbol wird wie zuvor angezeigt. Wenn ich jedoch auf das Menüsymbol klicke, wird nichts angezeigt.

Ich habe den folgenden Code, um ein Top-Bar-Menü anzuzeigen.

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

Es ist ein Top-Bar-Menü in meinem Raster.

Antworten:

5 für die Antwort № 1

Das Problem scheint in der Foundation.topbar.js-Datei zu sein. Der folgende Codeabschnitt

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

muss geändert werden in

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

15 für die Antwort № 2

Ich hatte das gleiche Problem mit der oberen Leiste. Nach dem Vergleich der zurbs-Code mit meinem bemerkte ich den Unterschied.

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

Ich habe die Daten-Topbar vermisst. Nachdem ich hinzugefügt habe, dass meine Topbar richtig funktioniert.


2 für die Antwort № 3

Nur ein FYI, es gibt einen weiteren Fehler in der Topbar, der das Scrollen unterbricht. Sie müssen Zeile 38 von foudation.topbar.js ändern von:

self.settings.stick_topbar = topbar;

zu

self.settings.sticky_topbar = topbar;

Dies wurde in der Version 5.0.3 behoben, aber seit der letzten Nacht war die Webseite der Foundation immer noch 5.0.2


2 für die Antwort № 4

Hier ist das Minimum, das du brauchst, damit es funktioniert ... Ich wurde vermisst $(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>

0 für die Antwort № 5

Ich hatte das gleiche Problem vorher. Für mich funktioniert es, wenn ich die topbar.js innerhalb des Körpers und unter der foundation.js einfüge.

Also, statt

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

Versuchen Sie, die topbar.js so in den Körper zu legen

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

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

0 für die Antwort № 6

Ich hatte ein ähnliches Problem mit Foundation 5.1.1. Keiner der oben vorgeschlagenen Korrekturen war für mich anwendbar (ich hatte bereits die data-topbar Attribut und der breakpoint Funktion wurde bereits in dieser Version der Foundation aktualisiert). Ich teste meinen Code-in-Entwicklung mit Firefox auf MacOS. Meine Javascript-Includes sind am Ende des Körpers.

In meinem Fall wurde das Problem durch die Aktualisierung von Zurb auf Version 5.2.1 behoben.


0 für die Antwort № 7

Ich habe dieses Problem seit gestern Abend erlebt und bin durch all diese Themen gegangen, nichts wirklich geholfen. Zum Schluss folgen die Schritte, die mir geholfen haben, das Problem zu lösen:

  1. Neu herunterladen Aktualisierte Complete Foundation.
  2. Enthaltenes HTML-Meta- (Viewport-) Tag, das ich vorher vermisste.
  3. Ich schließe die Dateien auf meiner Seite so ein:

    <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. Called Foundation Funktion in jquery statt js wie folgt:
    <script>
    $(document).ready(function() {
    $(document).foundation();
    });
    </script>


Am beliebtesten