Menu icon Foundation
Dropdown button not toggling

Hello,
I'm using a dropdown button with a little bit of extra styling for navigation on a mobile site. It expands fine when clicked, but it isn't toggling closed again. The only way I can close it is by clicking somewhere outside of the menu. I haven't modified any of the JS files.

I tried copying and pasting the sample html from the documentation into my page to see if I was omitting a class somewhere, but the result was the same. (The buttons on the Foundation site do work as expected in my browser.)

Here is my code.... Any suggestions would be appreciated. Thanks.

<!--HTML-->

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

.mobile-nav {
  
  .button {
    width: 100%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  .f-dropdown {
    text-align: center;
  }
}
         

Screen shot 2014 02 02 at 1.24.08 pm

dropdownbutton

Hello,
I'm using a dropdown button with a little bit of extra styling for navigation on a mobile site. It expands fine when clicked, but it isn't toggling closed again. The only way I can close it is by clicking somewhere outside of the menu. I haven't modified any of the JS files.

I tried copying and pasting the sample html from the documentation into my page to see if I was omitting a class somewhere, but the result was the same. (The buttons on the Foundation site do work as expected in my browser.)

Here is my code.... Any suggestions would be appreciated. Thanks.

<!--HTML-->

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

.mobile-nav {
  
  .button {
    width: 100%;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
  }
  .f-dropdown {
    text-align: center;
  }
}
         

Screen shot 2014 02 02 at 1.24.08 pm
Rafi Benkual over 5 years ago

This is intended behavior, http://foundation.zurb.com/docs/components/dropdown_buttons.html

In the example the menu stays open after click. The menu is expecting a click on a list item.

You can change the behavior to hover if you want by adding:

data-options="is_hover:true"

to the link.

Abby Jones over 5 years ago

Thanks for your response.

Having the menu stay open after a click is the expected (and desired) behavior. But if the menu is already open, a second click should close it. That's what happens in the examples in the documentation. On my page, nothing happens when I click the menu again after it's already open. Do you have any idea what I might need to change in order to get this functionality?

Jared McMorris over 5 years ago

Same problem here, and no it is not the intended behavior. The intended behavior is that you should be able to click the parent element to both open and close the dropdown menu. As Abby stated, it functions in this manner on the demo site, but for whatever reason it doesn't work when put into practice.

Jared McMorris over 5 years ago

Hi Abby,

Not sure if you're using anything else out of Foundation, but I found that if I downgrade to Foundation 4, the toggle on click feature works exactly as it should without modifying any code. Unfortunately this is not a valid solution for me since I am using off-canvas navigation that is rendered useless when using Foundation 4, but maybe it will work for you.

In the meantime, I will continue looking for a solution to the issue with Foundation 5.

Jared McMorris over 5 years ago

Me again,

I got a response on the Foundation GitHub repo and the user NikhilKalige was able to resolve the issue for me: https://github.com/zurb/foundation/issues/4532

Basically what you have to do is open foundation.min.js and search for the following line:

 t.preventDefault(), r.closeall.call(r), (!n.is_hover || Modernizr.touch) && r.toggle(e(this))

And replace it with this:

 t.preventDefault(), (!n.is_hover || Modernizr.touch) && r.toggle(e(this))

Hope this helps!

Pedro Miguel over 4 years ago

//worked for me

Foundation.libs.dropdown.close($('#mydropdownid'));