Search code examples
javascripthtmlsasszurb-foundationmixins

Enabling dropdown buttons with Zurb Foundation 5 - using sass mixins

I want to add a dropdown button to my website using Sass mixins. I've read the docs on Javascript and followed the installation to the best of my knowledge and I've gone through the docs on Dropdown Buttons. Here is my 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>

Here is my scss:

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

Here my javascript installation: (at the end of my html file before the closing body tag except modernizr which is at the top of my html file)

<!-- 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>

The only resuly I get with this code is a foundation styled button, but when you click it there is no dropdown options. Please let me know what I am doing wrong and how I can fix this issue for a simple dropdown button.

Thanks in advance.

Solution

  • You need to include all required js files. From Foundation Docs:

    Make sure jquery.js foundation.js and foundation.dropdown.js have been included on your page before continuing. For example, add the following before the closing <body> tag:

     <!-- ... -->

<!-- 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>