Menu icon Foundation
Enabling Dropdown Buttons

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:

<h1>Brand Gaming</h1>
      <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>

            

         

All I can 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.

dropdownbuttondropdown buttonSass

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:

<h1>Brand Gaming</h1>
      <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>

            

         

All I can 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.


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Take a look if this solves the problem: Foundation Dropdown Menus http://foundation.zurb.com/docs/components/dropdown.html/

ZURB has removed the various dropdowns within different UI elements for Foundation 5. Instead, they created a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.

Hope this helps!

This post has been closed. No new replies can be added.

Caleb Winters over 5 years ago

Your markup is accurate, so the problem is probably that the JS isn't loading. Are your file paths correct? Are other Foundation elements that require JS working?

Wing-Hou Chan over 5 years ago

Take a look if this solves the problem: Foundation Dropdown Menus http://foundation.zurb.com/docs/components/dropdown.html/

ZURB has removed the various dropdowns within different UI elements for Foundation 5. Instead, they created a universal dropdown plugin that will attach dropdowns or popovers to whatever element you need.

Hope this helps!