zurb-foundation - side - topbar foundation
Zurb Foundation 5 toggle-topbar no funciona (7)
Aquí está el mínimo que necesita para que funcione ... Me faltaba $(document).foundation(); ...
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css">
</head>
<body>
<nav class="top-bar" data-topbar="" data-options="is_hover: false" role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Mobile Parent Links</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
</ul>
<section class="top-bar-section" style="left: 0%;">
<ul class="left">
<li class="has-dropdown not-click"><a href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a>
<ul class="dropdown">
<li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
<li class="parent-link show-for-small">
<a class="parent-link js-generated" href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a></li>
<script src=''//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js''></script>
<script src=''//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.min.js''></script>
<script src=''//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/js/foundation/foundation.topbar.min.js''></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
Simplemente cambié el proyecto de mis rieles para probar Zurb Foundation 5 y ahora el menú de la barra superior de alternar no funciona.
Cuando la ventana gráfica es pequeña, los elementos del menú de la barra superior desaparecen y el icono del menú se muestra como antes, pero cuando hago clic en el icono del menú no ocurre nada.
Tengo el siguiente código para mostrar un menú de la barra superior.
<nav class="top-bar">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a>{href: "#"}
<span>Menú</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li>
<a class="i fi-home">{href: "/ui/home"}
Inicio</a></li>
<li>
<a>{href: "/ui/wine_reviews"} Críticas de Vinos</a></li>
<li>
<a>{href: "/ui/wine_tastings"} Catas y Maridajes</a></li>
<li>
<a>{href: "/ui/blogs"} Noticias</a></li>
</ul>
<ul class="right">
<li>
<a>{href: "#"}
<i class="fi-lock"></i>
Club TastaVi</a></li>
</ul>
</section>
</nav>
Es un menú de la barra superior contenido en mi cuadrícula.
El problema parece estar en el archivo Foundation.topbar.js. La siguiente sección de código
breakpoint : function () {
return matchMedia(Foundation.media_queries[''medium'']).matches;
}
necesita ser cambiado a
breakpoint : function () {
return !matchMedia(Foundation.media_queries[''topbar'']).matches;
}
Experimenté ese problema desde la tarde de ayer y revisando todos esos hilos, nada de truco realmente me ayudó. Por fin, los siguientes son los pasos que me ayudaron a resolver el problema:
- Re-descargado actualizado Fundación completa .
- Incluí la etiqueta html meta (viewport) que faltaba anteriormente.
Estoy incluyendo los archivos en mi página de esta manera:
<link rel="stylesheet" href="/css/foundation/foundation.css"/>
<link rel="stylesheet" href="/css/foundation/app.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/foundation/foundation.js"></script>
<script src="/js/foundation/foundation.topbar.js"></script>Se llama función Foundation en jquery en lugar de js como se muestra a continuación:
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
Experimenté un problema similar con la Fundación 5.1.1. Ninguno de los arreglos sugeridos anteriormente eran aplicables para mí (ya tenía el atributo data-topbar , y la función de breakpoint ya estaba actualizada en esta versión de Foundation). Estoy probando mi código en desarrollo con Firefox en MacOS. Mi Javascript incluye están al final del cuerpo.
En mi caso, el problema se solucionó al actualizar Zurb a la versión 5.2.1.
He tenido el mismo problema antes. Para mí, funciona cuando incluyo topbar.js dentro del cuerpo y debajo de foundation.js.
Entonces, en lugar de
<head>
<script src="../js/foundation.js"></script>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</head>
Intenta poner el topbar.js dentro del cuerpo como este
<head>
<script src="../js/foundation.js"></script>
....
</head>
<body>
<script src="../js/foundation/foundation.topbar.js"></script>
....
</body>
Solo un FYI, hay otro error en la barra superior que interrumpe el desplazamiento. Debe cambiar la línea 38 de foudation.topbar.js desde:
self.settings.stick_topbar = topbar;
a
self.settings.sticky_topbar = topbar;
Este problema se solucionó en la versión 5.0.3, pero a partir de la noche anterior, el sitio web de la Fundación aún tenía 5.0.2.
Tuve el mismo problema con la barra superior. Después de comparar el código de Zurbs con el mío, noté la diferencia.
<nav class="top-bar" data-topbar>
Me faltaba la barra de datos superior. Después de agregar que la barra superior de la mina comenzó a funcionar correctamente.