web-dev-qa-db-fra.com

Zurb Foundation 5 toggle-topbar ne fonctionne pas

Je viens de permuter mon projet Rails pour tester Zurb Foundation 5 et maintenant, le menu à bascule ne fonctionne pas.

Lorsque la fenêtre d'affichage est petite, les éléments de menu de la barre supérieure disparaissent et l'icône de menu est affichée comme auparavant, mais rien ne se produit lorsque je clique sur l'icône de menu.

J'ai le code suivant pour afficher un menu supérieur.

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

C'est un menu top-bar contenu dans ma grille.

zurb-foundation
21
Alex Bibiano

Le problème semble être dans le fichier Foundation.topbar.js. La section de code suivante

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

doit être changé pour

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

J'ai eu le même problème avec la barre supérieure. Après avoir comparé le code zurbs avec le mien, j'ai remarqué la différence.

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

Il me manquait la barre de données. Après avoir ajouté cette mine, la barre top a commencé à fonctionner correctement.

15
Kcrow

Juste un FYI, il y a un autre bug dans la barre supérieure qui interrompt le défilement. Vous devez modifier la ligne 38 de foudation.topbar.js de:

self.settings.stick_topbar = topbar;

à

self.settings.sticky_topbar = topbar;

Ce problème a été résolu dans la version 5.0.3 mais, hier soir, le site Web de la Fondation servait toujours la version 5.0.2.

2
DanHeidel

Voici le minimum dont vous avez besoin pour que ça marche ... Il me manquait $(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

J'ai eu ce problème depuis hier soir et en parcourant tous ces sujets, rien n'a vraiment aidé. Enfin, voici les étapes qui m'ont aidé à résoudre le problème:

  1. Complété re-téléchargé mise à jour complète .
  2. Balise méta (viewport) HTML incluse qui me manquait plus tôt.

  3. J'inclus les fichiers sur ma page de cette façon:

    <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. Fonction de base appelée dans jQuery plutôt que js comme ci-dessous:
    <script>
    $(document).ready(function() {
    $(document).foundation();
    });
    </script>

0
adi

J'ai rencontré un problème similaire avec Foundation 5.1.1. Aucune des corrections suggérées ci-dessus n'était applicable pour moi (j'avais déjà l'attribut data-topbar et la fonction breakpoint était déjà mise à jour dans cette version de Foundation). Je teste mon code en développement avec Firefox sur MacOS. Mon Javascript comprend sont à la fin du corps.

Dans mon cas, le problème a été résolu en mettant à niveau Zurb vers la version 5.2.1.

0
Graham Klyne

J'ai eu le même problème avant. Pour moi, cela fonctionne lorsque j'inclus le fichier topbar.js dans le corps et sous le fichier foundation.js.

Donc, au lieu de 

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

Essayez de mettre le topbar.js dans le corps comme ceci

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

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