Zurb Foundation Topbar non funziona affatto

Ho problemi a cercare di far funzionare la Topbar di Zurb Foundation su uno schermo mobile.Zurb Foundation Topbar non funziona affatto

Sto provando su Chrome con la larghezza dello schermo impostata sul più piccolo. Tutti i CSS e JS sono caricati, il menu sembra buono fino a quando non si fa clic e nulla.

Nota: sto usando WordPress.

Ecco il mio codice:

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

fonte

2014-06-18 Richard Skinner

Prova avvolgendo il foundation() chiamata in una funzione jQuery(document).ready() in questo modo:

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

Questo è probabilmente non è il problema ... Ma mi chiedo se il tuo DOM si sta caricando prima o dopo che JS ha la possibilità di caricarsi completamente poiché stai caricando il tuo JS in testa.

Successivamente, sembra che potrebbe mancare il file di base Foundation JS. Hai questo:

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

Ma foundation.topbar.jsdipende su foundation.js (come fanno tutti i plugin Foundation).

Quindi, come hai intenzione di classificare i sottomenu che WordPress sta generando? Si noti la marcatura nella documentazione ZURB Fondazione:

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

Se si controlla sul suo sito web generato Sto scommettendo che ti manca la classe "has-dropdown" sul <li> e la classe "dropdown" sul <ul>.

[modifica]

Ho anche notato che hai modificato il tuo markup nella tua domanda e ora hanno due <nav> elementi ed entrambi stanno definendo un attributo data-topbar. (Non sono sicuro che sia solo un errore di inserimento nella tua domanda o se il tuo markup è davvero così).

Provare a utilizzare il seguente markup invece, proprio come un test, per vedere se la funzionalità Fondazione Topbar sta lavorando (questo è l'esempio dalla documentazione):

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

Se questo fa lavoro, allora reinspect il tuo markup, confronta contrasto & quali classi ed elementi e annidamento potrebbe essere diverso e quindi regolare il codice di conseguenza. Potrebbe essere più semplice per avviare con il loro esempio e quindi modificare da lì.

fonte

2014-06-18 14:35:01

Grazie per il tuo commento molto utile. Tuttavia quando ho aggiunto tutto ciò che è necessario ancora nulla, senza errori. Inoltre, non ho bisogno di alcun menu a discesa, ma solo della navigazione principale di primo livello. Ho lavorato su questo per ore e sto iniziando a pensare di tornare a Bootstrap. –

@RichardSkinner Ho modificato la mia risposta in base al markup modificato nella tua domanda, sperando che questo aiuti –

A partire da zero e utilizzando il codice dal sito Web ha funzionato un piacere.Sono un completo idiota per non provarlo da solo. Scusa per aver sprecato il tuo tempo amico mio. –

Zurb Foundation Topbar non funziona affatto

risposta

Problemi correlati