Bonjour,
J'ai récemment recoder entièrement mon site avec Foundation 5.
La docs m'a été très utile, le tuto de Graf aussi, et j'y suis sans trop de problème, et rapidement, arrivé.
Cependant, je reste bloqué sur une partie.
Ça se passe au niveau de la navbar, j'ai un menu avec 4 liens.
Lorsque je réduit mon écran, il m'est impossible de retrouver mon menu en dropdown par exemple quand je clique sur "MENU".
Voici le code de mon header :
<header class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1 class="logo">
<a href="#">geetix</a>
<span class="border-bottom"></span>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="/">Accueil</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</section>
</nav>
</header>J'ai cru voir sur stackoverflow qu'il y aurait quelques problèmes avec le toggle-topbar.
Sinon j'ai bien vérifié que tout en bas de mes pages, les fichiers foundation.js et foundation.topbar.js étaient inclus.
Le $(document).foundation() est bien présent également, et jQuery est bien chargé normalement.
J'ai entendu parler de "Sticky" mais je ne comprends pas réellement comment l'utiliser, même si je pense que ça a un rapport avec ce que je cherche.
Je trouve pas très propre de cacher un menu et de l'afficher seulement lorsque l'écran est réduit, alors que le Framework peut normalement s'en charger automatiquement.
J'avoue avec un peu du mal à solutionner mon problème.
Auriez-vous une éventuelle solution ?
Merci d'avance pour vos réponses,
Etix.
9 réponses
enlève voir la balise méta device width dans les balise head. Visiblement elle n'est pas bonne. C'est pas forcément le soucis mais regarde voir ça déjà.
Après javascript est capricieux. Du coup s'il y a une error, il ne lis pas la suite du script donc si ton appel à foundation est plus bas que les erreurs script il ne la lira pas du coup ton code marchera pas ! enlève la ligne foundation de app.js et fais comme ça
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script>$(document).foundation().foundation()</script> <!-- initiialisation de foundation -->
<script src="js/app.js"></script>
<script src="js/masonry.js"></script>
<script src="js/portfolio.js"></script>
</body>
</html>J'ai testé avec ta version de jquery et ça ne passe pas.
Met à jour jquery ou prend celui fourni par foundation.
Bonjour,
Je me sers aussi de foundation5 quand je fais des test avec un minimum de design et du coup j'ai pu tester ton code en direct et chez moi il marche ^^
Pourrais tu donner la suite de ton code? Parce que moi je n'ai pas de soucis
La suite du code, c'est à dire ?
Dans mon footer j'ai :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script src="js/app.js"></script>
<script src="js/masonry.js"></script>
<script src="js/portfolio.js"></script>
</body>
</html>Sachant que j'utilise jQuery 1.6.2 pour le plugin Masonry (qui faut que je mette à jour).
Même avec le jQuery inclu dans foundation, ça ne fonctionne pas.
Et le app.js contient $(document).foundation();
Quand je clique sur les trois petit trais horizontaux en haut à droite du header, j'ai rien qui se passe.
Bonjour,
Tu devrais regarder l'inspecteur d'élément voir s'il te retourne une erreur en js.
Sinon tu dis que
<script>$(document).foundation().foundation()</script>est présent mais au cas ou je ne le vois pas !
foundation et foundation top bar ont un chemin complètement différent des autres js c'est volontaire?
Voici mon footer et moi ça passe nickel .
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/api.js"></script>
<script src="js/all.js"></script>
<script>$(document).foundation().foundation()</script>Bonjour,
Dans l'inspecteur, j'ai des erreurs et des warning, mais rien en rapport avec la topbar il me semble :
Sinon quand j'ai téléchargé Foundation, le foundation.min.js et foundation.topbar.js étaient bien aux chemins que j'ai indiqués, je ne les ai pas changé de place. Et même quand j'essaye de les placer dans le dossier js, rien ne se passe.
J'ai $(document).foundation().foundation()dans un fichier app.js. J'ai aussi essayé de mettre les balises script en dur, mais rien n'y fait.
J'ai vraiment du mal à voir d'où peut venir le problème ..
Merci tout de même pour ton aide.
C'est effectivement plus logique, mais il n'y a rien faire, quand je clique, le menu ne se déroule toujours pas ..
Et je viens de voir, que ça ne fonctionne ni sur Chrome, ni sur Firefox.
Cependant, j'ai créé un autre projet Foundation pour voir, et je viens de m'apercevoir que ça marche parfaitement.
Je vais essayer de voir ce que je peux faire de mon côté.
Merci quand même ;)
Il n'y a pas de quoi !
L'essentiel est que ça marche ! :)
Merci pour ton retour de réponse ça pourra aider les autres! :)