Zurb Foundation 5 не работает

Просто переключился на проект рельсов, чтобы проверить Zurb Foundation 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>

Это меню верхней панели, содержащееся в моей сетке.

Ответы

Ответ 1

Проблема находится в файле Foundation.topbar.js. Следующий раздел кода

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

необходимо изменить на

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

Ответ 2

У меня была такая же проблема с верхним баром. После сравнения кода zurbs с моим я заметил разницу.

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

Мне не хватало заголовка данных. Добавив, что верхняя панель вернулась к работе правильно.

Ответ 3

Просто FYI, есть еще одна ошибка в верхней панели, которая прерывает прокрутку. Вам нужно изменить строку 38 foudation.topbar.js из:

self.settings.stick_topbar = topbar;

к

self.settings.sticky_topbar = topbar;

Это было исправлено в версии 5.0.3, но по состоянию на прошлую ночь сайт Фонда все еще обслуживал 5.0.2

Ответ 4

Здесь минимально нужно, чтобы он работал... Мне не хватало $(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>

Ответ 5

У меня была такая же проблема. Для меня это работает, когда я включаю topbar.js внутри тела и под основание .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>

Ответ 6

У меня возникла аналогичная проблема с Foundation 5.1.1. Ни одно из указанных выше исправлений не было применимо для меня (у меня уже был атрибут data-topbar, а функция breakpoint была уже обновлена ​​в этом выпуске Foundation). Я тестирую свой код в разработке с помощью Firefox на MacOS. Мой Javascript включает в себя конец тела.

В моем случае проблема была устранена путем обновления Zurb до версии 5.2.1.

Ответ 7

Я испытал этот вопрос со вчерашнего вечера и пережил все такие темы, ничего не помогло. Наконец, следующие шаги, которые помогли мне решить проблему:

  • Повторно загруженный обновленный Complete Foundation.
  • Добавлен тег html meta (viewport), который ранее отсутствовал.

  • Я включаю файлы на своей странице таким образом:

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

  • Функция Called Foundation в jquery, а не js, как показано ниже:
    <script>
    $(document).ready(function() {
    $(document).foundation();
    });
    </script>