Menu icon Foundation
Toggler: show/hide not working for drilldown menu

Hi,

I'm using Toggler to show/hide a drilldown menu when a button is clicked. This code works as expected if the menu is displayed by default. If the menu is hidden by default with class='hide', the menu never appears ... no matter what.

Code to demonstrate the problem:

<div id="hamburger" class="title-bar" data-toggle="navmenu">
  <button class="menu-icon" type="button"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div id="navmenu" class="hide" data-toggler="hide">
  <ul id="navmenu-ul" class="vertical menu" data-drilldown>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

If you remove either data-drilldown or class="hide" attributes, the code works fine. I'll also point out this doesn't work with Toggle Animation (data-animate)

Help!

togglerfoundation 6drilldown menumenu

Hi,

I'm using Toggler to show/hide a drilldown menu when a button is clicked. This code works as expected if the menu is displayed by default. If the menu is hidden by default with class='hide', the menu never appears ... no matter what.

Code to demonstrate the problem:

<div id="hamburger" class="title-bar" data-toggle="navmenu">
  <button class="menu-icon" type="button"></button>
  <div class="title-bar-title">Menu</div>
</div>

<div id="navmenu" class="hide" data-toggler="hide">
  <ul id="navmenu-ul" class="vertical menu" data-drilldown>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

If you remove either data-drilldown or class="hide" attributes, the code works fine. I'll also point out this doesn't work with Toggle Animation (data-animate)

Help!

Brian Tan almost 4 years ago

Drilldown initialization cannot handle hidden menu. Remove class="hide" and add the following after reflow:

<script>
$(document).foundation();
$("#navmenu").addClass("hide");
</script>

Though in 6.0.6, after drilldown throws a bunch of errors, the menu can be toggled.

E. Smythe almost 4 years ago

Thanks, Brian. That's not ideal since the menu can be seen briefly during load, as I'm sure you know. I'm really good as JS and could probably fix the underlying problem if only I knew more about Foundation plugins.