Подтвердить что ты не робот

Zurb Foundation Topbar не работает вообще

У меня возникают проблемы, пытаясь заставить Zurb Foundation Topbar работать на мобильном экране.

Я тестирую на хроме с шириной экрана, самой маленькой. Все CSS и JS загружены, меню выглядит нормально до щелчка и ничего.

Примечание. Я использую WordPress.

Здесь мой код:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title><?= (is_front_page() ? 'Revive Architects | London\ most trusted architect for conversions / extensions ' : get_post_meta($post->ID, '_seo_title', true));  ?></title>
        <meta name="description" content="<?= (is_front_page() ? 'London\ most trusted architect. Over 25 years of architectural experience, we have helped hundreds over in clients in the London area.' : get_post_meta($post->ID, '_seo_description', true)) ?>">   
        <meta name="author" content="www.werdigital.co.uk">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- STYLESHEETS -->
        <link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/normalize.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/css/foundation.min.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="<? bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <!-- /STYLESHEETS -->

        <!-- JS -->
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/jquery.js"></script>
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/modernizr.js"></script>
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/vendor/fastclick.js"></script>
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.js"></script>
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
        <script type="text/javascript" src="<? bloginfo('template_url'); ?>/js/script.js"></script>
        <script>
            jQuery(document).ready({
                jQuery(document).foundation();
            });
        </script>
        <!-- /JS -->

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <?  wp_head(); ?>
    </head>

    <body>
        <div class="page clearfix">
            <header>
                <div class="row header-wrapper">
                    <div class="large-12 medium-12 columns">
                        <a href="<? bloginfo('url'); ?>"><img class="logo"  alt="" src="<? bloginfo('template_url'); ?>/images/logo.png" /></a>
                    </div>
                </div>
                <div class="top-nav">
                    <div class="row">
                        <div class="large-12 medium-12 columns">
                            <div class="contain-to-grid">
                                <nav class="top-bar" data-topbar>
                                    <ul class="title-area">
                                        <li class="name">
                                            <a href="<?= get_option('home'); ?>"><img class="logo-icon" width="100" alt="" src="<? bloginfo('template_url'); ?>/images/logo-icon.png" /></a>
                                        </li>
                                        <li class="toggle-topbar menu-icon">
                                            <a href="#"><span>Menu</span></a>
                                        </li>
                                    </ul>

                                    <section class="top-bar-section">
                                        <ul id="menu-primary" class="right"><li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11"><a href="#" onclick="location.href='http://dev.revivearchitects.co.uk/about-us/'; return false;">About Us</a></li>
                                            <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="#" onclick="location.href='http://dev.revivearchitects.co.uk/architect-projects/'; return false;">Projects / Services</a></li>
                                            <li id="menu-item-23" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23"><a href="#" onclick="location.href='http://dev.revivearchitects.co.uk/blog/articles-and-guides/'; return false;">Articles</a></li>
                                            <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#" onclick="location.href='http://dev.revivearchitects.co.uk/contact-us/'; return false;">Contact Us</a></li>
                                        </ul>   
                                    </section>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте обернуть вызов foundation() в функции jQuery(document).ready(), например:

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

Возможно, это не проблема... Но мне интересно, загружается ли DOM до или после того, как ваш JS имеет возможность полностью загрузиться с момента загрузки вашего JS в голову.

Далее, похоже, что вы можете потерять базовый базовый JS файл. У вас есть следующее:

<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>

Но foundation.topbar.js зависит от foundation.js (как и все плагины Foundation).

Далее, как вы планируете классифицировать свои подменю, которые создает WordPress? Обратите внимание на разметку в документах Zurb Foundation:

  <li class="has-dropdown">
    <a href="#">Right Button Dropdown</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul>
  </li>

Если вы проверите свой сгенерированный контент, который, я уверен, вы потеряете класс "has-dropdown" в классе <li> и "dropdown" на <ul>.

[править]

Я также заметил, что вы отредактировали свою разметку в своем вопросе и теперь имеете два элемента <nav>, и оба определяют атрибут data-topbar. (Я не уверен, что это просто ошибка в вашем вопросе или если ваша разметка действительно выглядит так).

Попробуйте использовать следующую разметку вместо этого, как тест, чтобы увидеть, работает ли функция Topbar Foundation (это образец из документов):

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

Если этот работает, то переосмыслите свою собственную разметку, сравните и сравните, какие классы и элементы и вложенность могут быть разными, а затем соответствующим образом скорректируйте свой код. Это может быть проще начать с их примера, а затем настроить там.