Activation des boutons déroulants avec Zurb Foundation 5 - en utilisant les mixins Sass

StackOverflow https://stackoverflow.com//questions/20009473

Question

Je souhaite ajouter un bouton déroulant à mon site Web à l'aide des mixins Sass.J'ai lu la documentation sur Javascript et suivi l'installation au meilleur de mes connaissances et j'ai parcouru la documentation sur les boutons déroulants.Voici mon html :

<a href="#" data-dropdown="drop" class="login">Dropdown Button</a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

Voici mon scss :

 .login {
  @include grid-column(2);
  @include button();
  @include dropdown-button();
}

Voici mon installation javascript :(à la fin de mon fichier html avant la balise de fermeture body sauf modernizr qui se trouve en haut de mon fichier html)

<!-- modernizr -->
<script src="/js/custom.modernizr.js"></script>

<!-- jQuery -->
<script src="/js/vendor/jquery.js"></script>

<!-- automatically loads the Foundation Core and all JavaScript plugins. -->
<script src="/js/foundation.min.js"></script>

<!-- Initialize Foundation -->
<script>
  $(document).foundation();
</script>

Le seul résultat que j'obtiens avec ce code est un bouton de style fondation, mais lorsque vous cliquez dessus, il n'y a pas d'options déroulantes.S'il vous plaît laissez-moi savoir ce que je fais de mal et comment je peux résoudre ce problème avec un simple bouton déroulant.

Merci d'avance.

Était-ce utile?

La solution

Vous devez inclure tous les fichiers js requis.Depuis Documents de la Fondation:

S'assurer jquery.js foundation.js et foundation.dropdown.js ont été inclus sur votre page avant de continuer.Par exemple, ajoutez ce qui suit avant la fermeture <body> étiqueter:

 <!-- ... -->

<!-- your button... -->
<a href="#" data-dropdown="drop1" class="button">Dropdown Button</a><br>
<ul id="drop1" class="f-dropdown">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

<!-- ... -->

<!--
Here you should include the paths of your javascript files and initialize foundation
Add all these scripts before the closing <body> tag
-->

<!-- jQuery -->
<script src="js/jquery.min.js"></script>

<!-- Foundation -->
<script src="js/foundation.min.js"></script>

<!-- Foundation dropdown -->
<script src="js/foundation.dropdown.min.js"></script>

<!-- Initialize Foundation -->
<script>
$(document).foundation();
</script>

</body>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top