Zurb Foundation Topbar no funciona en absoluto

8 minutos de lectura

avatar de usuario
ricardo desollador

Tengo problemas para hacer que Zurb’s Foundation Topbar funcione en una pantalla móvil.

Estoy probando en Chrome con el ancho de pantalla establecido en el más pequeño. Todos los CSS y JS están cargados, el menú se ve bien hasta que haces clic y nada.

Nota: Estoy usando WordPress.

Aquí está mi código:

<!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="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/css/normalize.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/css/foundation.min.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="https://stackoverflow.com/questions/24288179/<? bloginfo("stylesheet_url'); ?>" type="text/css" media="screen" />
        <!-- /STYLESHEETS -->

        <!-- JS -->
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/js/vendor/jquery.js"></script>
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/js/vendor/modernizr.js"></script>
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/js/vendor/fastclick.js"></script>
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.js"></script>
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? bloginfo("template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>
        <script type="text/javascript" src="https://stackoverflow.com/questions/24288179/<? 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="http://stackoverflow.com/favicon.ico">
        <link rel="apple-touch-icon" href="http://stackoverflow.com/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="https://stackoverflow.com/questions/24288179/<? bloginfo("url'); ?>"><img class="logo"  alt="" src="https://stackoverflow.com/questions/24288179/<? 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="https://stackoverflow.com/questions/24288179/<? 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>

avatar de usuario
Jared Cobb

Intenta envolver tu foundation() llamar en un jQuery(document).ready() funcionar así:

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

Ese es probablemente no es el problema … Pero me pregunto si su DOM se está cargando antes o después de que su JS tenga la oportunidad de cargarse por completo, ya que está cargando su JS en la cabeza.

A continuación, parece que te estás perdiendo el base Archivo JS de la Fundación. Tu tienes esto:

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

Pero foundation.topbar.js depende en foundation.js (al igual que todos los complementos de la Fundación).

A continuación, ¿cómo piensa clasificar los submenús que genera WordPress? Observe el marcado en los documentos de la Fundación Zurb:

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

Si inspecciona su generado contenido, apuesto a que te estás perdiendo el "has-dropdown" clase en el <li> y el "dropdown" clase en el <ul>.

[edit]

También noté que editó su marcado en su pregunta y ahora tiene dos <nav> elementos y ambos están definiendo un data-topbar atributo. (No estoy seguro si eso es solo un error de pegado en su pregunta o si su marcado realmente se ve así).

Intente usar el siguiente marcado en su lugar, solo como prueba, para ver si la funcionalidad de Foundation Topbar está funcionando (este es el ejemplo de los documentos):

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

Si eso lo hace trabajo, luego vuelva a inspeccionar su propio marcado, compare y contraste qué clases y elementos y anidamiento pueden ser diferentes y luego ajuste su código en consecuencia. Podría ser más fácil comienzo con su ejemplo, y luego ajustar desde allí.

  • Gracias por tu comentario de gran ayuda. Sin embargo, cuando agregué todo lo requerido todavía nada, sin errores. Tampoco necesito ningún menú desplegable, solo la navegación principal de nivel superior. Llevo horas trabajando en esto y estoy empezando a pensar en volver a Bootstrap.

    –Richard Skinner

    18 de junio de 2014 a las 14:57

  • @RichardSkinner Edité mi respuesta en función de su marcado editado en su pregunta, espero que eso ayude

    – Jared Cobb

    18 de junio de 2014 a las 15:14

  • Comenzar desde cero y usar el código del sitio web funcionó de maravilla. Soy un completo idiota por no intentarlo yo mismo. Lo siento por hacerte perder el tiempo, mi amigo.

    –Richard Skinner

    18 de junio de 2014 a las 15:41


  • @RichardSkinner ¡No es un desperdicio en absoluto, me alegro de que lo hayas hecho funcionar! ¡Que te diviertas!

    – Jared Cobb

    18 de junio de 2014 a las 15:53

¿Ha sido útil esta solución?