Topbar Zurb Foundation nie działa w ogóle

Mam problemy, próbując uzyskać Topbar Fundamentu Zurb do pracy na ekranie mobilnym.Topbar Zurb Foundation nie działa w ogóle

Testuję na chromie przy ustawionej szerokości ekranu na najmniejszą. Wszystkie CSS i JS są załadowane, menu wygląda dobrze dopóki nie klikniesz i nic.

Uwaga: Używam WordPressa.

Oto mój kod:

<!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\'s most trusted architect for conversions/extensions ' : get_post_meta($post->ID, '_seo_title', true)); ?></title> 
     <meta name="description" content="<?= (is_front_page() ? 'London\'s 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="http://dev.revivearchitects.co.uk/about-us/">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="http://dev.revivearchitects.co.uk/architect-projects/">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="http://dev.revivearchitects.co.uk/blog/articles-and-guides/">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="http://dev.revivearchitects.co.uk/contact-us/">Contact Us</a></li> 
             </ul> 
            </section> 
           </nav> 
          </div> 
         </div> 
        </div> 
       </div> 
      </header>

Źródło

2014-06-18 Richard Skinner

Spróbuj zawijania wezwanie foundation() w jQuery(document).ready() funkcję tak:

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

To prawdopodobnie nie problem ... Ale zastanawiam się, czy Twój DOM ładuje się przed lub po JS ma szansę w pełni załadować, ponieważ ładujesz JS w głowę.

Następnie wygląda na to, że może brakować podstawowego pliku JS base. Trzeba to:

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

Ale foundation.topbar.jszależy na foundation.js (podobnie jak wszystkich wtyczek Foundation).

Następnie, w jaki sposób planujesz klasyfikować swoje podmenu generowane przez WordPress? Zauważ znaczników w docs ZURB założenia:

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

Jeśli skontrolować zawartość generowane założę tracisz klasę "has-dropdown" na <li> i klasy "dropdown" na <ul>.

[edytuj]

Zauważyłem również, że edycja znaczników w swoim pytaniu, a teraz mają dwa <nav> elementy i oba są zdefiniowaniu atrybutu data-topbar. (Nie jestem pewien, czy to jest tylko błąd wklejenia w twoim pytaniu, czy też naprawdę wygląda to w twoim znaczniku).

Spróbuj użyć następującego znaczników zamiast tylko jako test, aby sprawdzić, czy funkcjonalność Fundacja Topbar pracuje (jest to próbka z docs):

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

Jeśli robi pracy, a następnie Ponownie sprawdź swój własny znacznik, porównaj, które klasy i elementy oraz zagnieżdżanie mogą się różnić, a następnie odpowiednio dostosuj swój kod. Może być łatwiejsze start z ich przykładem, a następnie stuknij stamtąd.

Źródło

2014-06-18 14:35:01

Dziękuję za komentarz bardzo pomocny. Jednak po dodaniu wszystkich wymaganych nadal nic, bez błędów. Nie potrzebuję też żadnego rozwijania, tylko główną nawigację na najwyższym poziomie. Pracowałem nad tym przez wiele godzin i zaczynam myśleć o powrocie do Bootstrap. –

@RichardSkinner Zmieniłem moją odpowiedź na podstawie edytowanego znacznika w twoim pytaniu, mam nadzieję, że pomoże –

Od zera i używanie kodu z witryny działało przyjemnie.Jestem kompletnym idiotą, bo sam tego nie próbowałem. Przepraszamy za zmarnowanie twojego czasu, przyjacielu. –

Topbar Zurb Foundation nie działa w ogóle

Odpowiedz

Powiązane problemy