Foundation-sites: Foundation 5 dropdown menu does not toggle on click

Created on 24 Feb 2014 · 14Comments · Source: foundation/foundation-sites

I am trying to set up my Foundation 5 dropdown menu to toggle on click(like it does on the documentation site) but have had no luck. The menu opens on click but in order to close it I have to click somewhere else on the page(clicking the parent element again does nothing).

Please advise, thanks!

Here is my post on the forum:
http://foundation.zurb.com/forum/posts/2522-foundation-5-toggle-f-dropdown-on-click

And another person experiencing the same issue:
http://foundation.zurb.com/forum/posts/2032-dropdown-button-not-toggling

Source

JMcM

Most helpful comment

Hi,

I am having issues making the dropdowns work, fresh installation and copy+paste from the site.

I loaded jquery.js & foundation.min.js and called $(document).foundation(); and still not working.

What could be the issue?

Mr-Alexander on 3 Jun 2015

👍4

All 14 comments

@JMcM I tried the below markup and it works for me.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
    <style>
    .mobile-nav {
          .button {
            width: 100%;
            border-top: 2px solid white;
            border-bottom: 2px solid white;
          }
          .f-dropdown {
            text-align: center;
          }
        }
    </style>
</head>
<body style="background-color: #ddd">
    <nav class="mobile-nav" role="navigation">
        <a href="#" data-dropdown="mobile-nav" class="button dropdown">Learn More!</a><br>
            <ul id="mobile-nav" data-dropdown-content class="f-dropdown">
                <li> <a href="index.html"> Home </a> </li>
                <li> <a href="AboutUs.html"> About Us </a> </li>
                <li> <a href="Schedule.html"> Schedule </a> </li>
                <li> <a href="Register.html"> Register </a> </li>
                <li> <a href="PhotoGallery.html"> Photo Gallery </a> </li>
            </ul>
    </nav>
    <div class="row">
        <div class="large-12 columns">
            <a href="#" data-dropdown="drop" class="button dropdown">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>
        </div>
    </div>


    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

nikhilkalige on 25 Feb 2014

Thanks for the response but it is still not working for me and I have my HTML laid out the same way as yours. If I downgrade to Foundation 4 it works exactly as it should without modifying any code. There are others out there with this same issue on Foundation 5 so something must be going on that's causing this.

JMcM on 25 Feb 2014

Same here. After an upgrade from foundation 5.0.3 to 5.1.1 dropdowns stopped working.

jurreantonisse on 25 Feb 2014

@JMcM I cant reproduce it. I created a new directory using foundation new and used the same code as above

But the jquery location seems to have changed.. so i changed
<script src="bower_components/jquery/jquery.js"></script> to
<script src="bower_components/jquery/dist/jquery.js"></script>. And it worked for me..

May be a zip file of all the contents..

nikhilkalige on 25 Feb 2014

You can see a live example here: _redacted_

I tried disabling all my other javascripts and that didn't resolve the issue either. I tried downgrading to 5.0.3 based on jurreantonisse's comment, but the same issue still exists.

JMcM on 25 Feb 2014

@JMcM I checked you site... i find that the foundation.min.js differs from mine.. if you are using chrome dev tools.. if you use pretty print... then in line 315 t.preventDefault(), r.closeall.call(r), (!n.is_hover || Modernizr.touch) && r.toggle(e(this))
I think it should be t.preventDefault(), (!n.is_hover || Modernizr.touch) && r.toggle(e(this))

Please check once. i am not sure if this will clear the issue..

nikhilkalige on 25 Feb 2014

Awesome, that fixed it Nikhil! Thank you so much!

JMcM on 25 Feb 2014

@JMcM Please close this..

nikhilkalige on 28 Feb 2014

Is that a real fix, though? It seems to be a monkey-patch. The dropdown issue is still present, no?

elsurudo on 17 Mar 2014

Hi,

I am having issues making the dropdowns work, fresh installation and copy+paste from the site.

I loaded jquery.js & foundation.min.js and called $(document).foundation(); and still not working.

What could be the issue?

Mr-Alexander on 3 Jun 2015

👍4

I have the same issue with Foundation v5.5.3

ejwaibel on 22 Mar 2016

Hi,

I am having issues making the dropdowns work, fresh installation and copy+paste from the site.

I loaded jquery.js & foundation.min.js and called $(document).foundation(); and still not working.

What could be the issue?