Menu icon Foundation

My Posts

No Content

My Comments

George Drakakis commented on Jonathan Ireland's post almost 2 years

This is a really annoying bug. The way I solved it is by using jquery, you already have this dependency if you use foundation so i guess it's fine.
The steps
I first added a class that hides the submenu. This way in the initial page load the submenu is hidden because it was forced by this rule:
.hide-on-load{
display:none;
}
and then attach it to my ul element/elements that is actually a drop-down menu. For example:
<ul class="dropdown menu" data-dropdown-menu>
<li class="is-dropdown-submenu-parent">
<a href="#">Settings</a>
<ul class="menu hide-on-load">
<li>option1</li>
</ul>
</li>
</ul>
I then added this jquery line of code as the last element of my closing </body> tag.
$('ul.hide-on-load').removeClass('hide-on-load');
 
So this way in the initial page load it is hidden and when foundation javascript has completely loaded we removed it completely from the DOM. It works just fine in my case although a bit messy for my taste.

George Drakakis commented on Aurora's post over 3 years

Had the same problem, seems that "data-reveal" must exist in the div that is the container. This wasn't needed in previous versions, I added it and voila!
HTML
<div class='reveal-modal' id='first-modal' data-reveal>

Posts Followed



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Jonathan Ireland's post almost 2 years

This is a really annoying bug. The way I solved it is by using jquery, you already have this dependency if you use foundation so i guess it's fine.
The steps
I first added a class that hides the submenu. This way in the initial page load the submenu is hidden because it was forced by this rule:
.hide-on-load{
display:none;
}
and then attach it to my ul element/elements that is actually a drop-down menu. For example:
<ul class="dropdown menu" data-dropdown-menu>
<li class="is-dropdown-submenu-parent">
<a href="#">Settings</a>
<ul class="menu hide-on-load">
<li>option1</li>
</ul>
</li>
</ul>
I then added this jquery line of code as the last element of my closing </body> tag.
$('ul.hide-on-load').removeClass('hide-on-load');
 
So this way in the initial page load it is hidden and when foundation javascript has completely loaded we removed it completely from the DOM. It works just fine in my case although a bit messy for my taste.

You commented on Aurora's post over 3 years

Had the same problem, seems that "data-reveal" must exist in the div that is the container. This wasn't needed in previous versions, I added it and voila!
HTML
<div class='reveal-modal' id='first-modal' data-reveal>

Posts Followed



Following

  • No Content

Followers

  • No Content