Menu icon Foundation
Issue with DrillDown menu in a Reveal modal

Hello!
Everything is in the subject!
Foundation 6.
I need to have a drilldown menu in a reveal modal box. It's not working.
If I take the menu code outside the reveal modal, it works.
As I understand, it's because the drilldown javascript is unable to calculate size of the menu on loading as the menu is hidden in the reveal modal...
Could we find a solution?
Thanks!

drilldownrevealmenu

Hello!
Everything is in the subject!
Foundation 6.
I need to have a drilldown menu in a reveal modal box. It's not working.
If I take the menu code outside the reveal modal, it works.
As I understand, it's because the drilldown javascript is unable to calculate size of the menu on loading as the menu is hidden in the reveal modal...
Could we find a solution?
Thanks!

Rafi Benkual over 3 years ago

Interesting combination. I'm curious what the use case of adding these components together is.

You'll probably need to reflow the drilldown for it to work.

Vincent Morel over 3 years ago

A client wanted the menu to be in a reveal, totally different from other website... Donc know if it's good for SEO but that what I need to do so... Anyway it's beautiful and very convenient.

I'm not very good with "event" and "reflow"... Could you give me an exemple?

Also note that Foundation freeze as when I load the page drilldown pop an error, so I cannot do any reflow after...

Brian Tan over 3 years ago

This works OK. Define drilldown outside reveal and move it into reveal once reflowed.

<p><a data-toggle="animatedModal1">Click me for a modal</a></p>

<div class="reveal" id="animatedModal1" data-reveal
  data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out" >
  <h1>Whoa, I'm dizzy!</h1>
  <div id="ddMenu" ></div>
  <button class="close-button" data-close type="button">&times;</button>
</div>

<div id="drilldownMenu"  class="row small-4 column end">
  <ul id="menu" class="menu" data-drilldown>
    <li><a href="#">Menu 1</a>
      <ul class="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </li>
  </ul>
</div>

<script>
$(document).foundation();
$("#drilldownMenu").detach().appendTo("#ddMenu");
</script>

Vincent Morel over 3 years ago

Thanks!
And I forgot to say: Foundation 6 is great! :)

Rafi Benkual over 3 years ago

Nice answer Brian! @Vincent Morel Make sure to mark helpful responses :)

Brian Tan over 3 years ago

P/S: detach() is not necessary. I was experimenting with saving the data.

$(document).foundation();
$("#drilldownMenu").appendTo("#ddMenu");