drop-down-menu - left - off canvas menu foundation 6

La barra superior de Foundation 5 no se despliega (9)

si usa la versión minimizada de base (foundation.min.js), no cargue otros complementos, ya que se cargan automáticamente y funcionará.

Ya he leído muchos temas sobre esto, pero nada parece estar funcionando.

acabo de iniciar un proyecto y virtualmente copié / pegué el código del sitio de documentación de la fundación y no funciona.

aquí está mi prueba html

<body> <header> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> </ul> <section class="top-bar-section">  <ul class="right"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown"> <a href="#">Right Button with Dropdown</a> <ul class="dropdown"> <li><a href="#">First link in dropdown</a></li> </ul> </li> </ul>  <ul class="left"> <li><a href="#">Left Nav Button</a></li> </ul> </section> </nav> </header> <footer> <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p> </footer> </body> </html>

para la hoja de estilo, está vacía, incluso intenté quitarla por completo para estar seguro pero lo mismo, su punto cayendo.

alguna idea de lo que me perdí? Gracias

EDITAR:

ok así que encontré algo, el código que se muestra en la página de documentos de base zurbs, no funciona al copiar / pegar, sin embargo, si uso el inspector y copio el html de su ejemplo, funciona. sin embargo, cuando reduce el tamaño del navegador, aparecen las 3 líneas con el botón de menú, pero al pasar el puntero sobre él, no se despliega, tampoco hace clic, ¿cómo solucionarlo?

el html para eso es

<nav class="top-bar" data-topbar=""> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="">Menu</a></li> </ul> <section class="top-bar-section" style="left: 0%;">  <ul class="right show-for-large-up"> <li class="active"><a href="#">Right Button Active</a></li> <li class="has-dropdown not-click"> <a href="#">Right Button Dropdown</a> <ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li> <li><a href="#">First link in dropdown</a></li> </ul> </li> </ul> </section></nav>

estoy cargando estos guiones

<script src="js/vendor/modernizr.js"></script>  <script src="js/foundation.min.js"></script> <script src="js/foundation/foundation.topbar.js"></script> <script src="js/foundation/foundation.offcanvas.js"></script>

También intenté eliminar las secuencias de comandos de la barra superior y de la barra lateral, y simplemente utilizando el botón de base.min.js uno, nada funciona, aparece pero no está disponible la opción desplegable.

Probablemente haya encontrado su respuesta a esta pregunta en este momento, pero probablemente necesite agregar el siguiente código para inicializar la Fundación cuando el documento esté listo.

<script> $(document).foundation(); </script>

Tuve el mismo problema hoy y, al hacer lo mismo que tú, me di cuenta de que es el "no hacer clic" en esta línea:

<li class="has-dropdown not-click">

Lo agregué y ahora funciona bien (para mí (¿solo?)).

La página de plantillas de Foundation 5 en Foundation HTML Templates muestra algunos ejemplos de navegación en la barra superior (su código está bien), pero lo que no se menciona son dependencias.

F5 requiere jQuery 2, la mayoría de los cms ''(Wordpress) usan jQuery 1
jQuery 2 no funciona en IE 8 o menos, debe usar IE 9 o mejor

<script> $(document).foundation(); </script>

No lo hizo funcionar, pero lo siguiente hizo

$(document).ready(function(){ $(document).foundation(); });

¿Tu proyecto está funcionando ahora? Deberá cargar los siguientes archivos

<script src="js/vendor/modernizr.js"></script> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script>

Esto funcionó para mí:

$(document).ready(function(){ $(document).foundation(); });

Yo tuve el mismo problema. Lo que lo solucionó fue quitar turbolinks:

Elimina la línea de gem ''turbolinks'' de tu Gemfile.
Elimina // // require turbolinks de tu aplicación / assets / javascripts / application.js.
Elimine los dos pares de clave / valor de hash "data-turbolinks-track" => true desde su aplicación / views / layouts / application.html.erb. (de http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 )

Personalmente, trato de evitar js cuando css-only puede hacer bien el trabajo . Mantiene el modelo mental de lo que Foundation trata de lograr para usted de una manera más simple.

Es un código simple como HTML

<nav id="primary_nav_wrap"> <ul> <li><a href="#">Menu 1</a> <ul>

que solo necesitan clases de declaración CSS.