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">
<!-- Right Nav 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>
<!-- Left Nav Section -->
<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%;">
<!-- Right Nav Section -->
<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>
<!-- Foundation Top Bar -->
<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.