Menu icon Foundation
Dropdown Menu showing on load.

Hello, 

My drop-down menu is briefly showing on load before JS is loaded up any ideas how to stop this? example https://www.hebridescruises.co.uk/ 

Cheers

 

Jon

menudropdown

Hello, 

My drop-down menu is briefly showing on load before JS is loaded up any ideas how to stop this? example https://www.hebridescruises.co.uk/ 

Cheers

 

Jon

Daren Barry over 2 years ago

Hi Jonathan - this issue is called FOUC - Flash of unstyled content. I noticed it as soon as Foundation 6 came out. They (the Foundation guys) suggested upgrading from 6.0.5 to 6.2.1 to 6.2.3... none of these FIXED the issue. There are some HACKS that minimize it as suggested by Rafi - but make no mistake, there is no cure for this while using Foundation. The other issue is when you have a drop down menu, the arrows to the right of the link that indicate there's a drop down... they make the entire menu move until everything is loaded. You can see this at www.thealignmentcenter.com 

 

I built my client's site using Foundation 6.3.1 & Jquery 3.1.1 - the latest "and greatest" according to the Foundation team - but the issue still exists. The only cure I've found is Bootstrap and I"m tempted to redo this site in BS. 

Jonathan Ireland over 2 years ago

Thanks guys, I have tried Rafi suggestion but makes no noticeable difference. Ive not really noticed it on my other foundation sites as most as single level. I do have some other site which are using jointwp foundation which dont have this issue so ill look into that.

 

Rafi Benkual over 2 years ago

Jonathan - where are the JS files loaded in your application? Are the loaded in the body before the closing body tags?

 

Thanks Darren - the information is useful.

One thing I would never say is there is no cure for this while using Foundation

 

It's code - so anything can be fixed or changed.

Daren Barry over 2 years ago

Hi Rafi, I love working with foundation it has a lot of very useful tools that make design, development, and mobile friendly very efficient and effective. However, I'll be honest... I specifically stated this: there is no cure for this while using Foundation.... to get your attention. It is my opinion that this needs to be addressed by Foundation. This was not an issue in Foundation 5: www.audreywingodds.com I launched that site 09/30/15 - over 18 months ago. The next site I built (and all others) I used Foundation 6 and I've had the same FOUC issue ever since - we're going on 20 months! Clearly I am not the only guy affected by this. I paid for a Foundation class thinking I might learn something I missed (hoping I missed something and I could correct this issue on all my sites). But it turns out there is no cure for this at the moment and the $299 I paid taught me that I was in fact doing things correctly, but there's still an issue with FOUC. I've posted about this in the past, both here and in other "blogs" - yet no cure. I'm a team player and I'd love to see this resolved! My peers that develop on MAC don't see it nearly as much as those of us that use a PC. It's clearly visible both upon loading a page AND when you adjust your browser to the point of the hamburger appearing and disappearing. How can I help?

Jonathan Ireland over 2 years ago

Hello Thanks for getting back to me. I managed to resolve this so its not half as bad now. I used method Rafi suggested I hadn't added the .no-js class to .title-bar and .top-bar

Cheers

 

Jon

Rob Gibson over 2 years ago

Is anyone at Zurb getting any traction on this issue?  This issue, even with the SASS/CSS "work-around," make Foundation for Sites a non-starter for anything I am working on.  Hopefully this will be fixed soon.   

Joe Tannorella over 2 years ago

Hi. I had the same issue. The fix in the docs indeed doesn't work as stated.

One horrible fix that does work is to simply inline the CSS into the HTML, before the dropdown element, so that it looks before the element has a chance to load.

Hope this helps someone.

E.g.

<style>
/* Horrible fix to prevent FOUC in the dropdown */
.jt-is-dropdown-submenu {
    display:none;
}
</style>
<div class="top-bar header-nav">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text"><a href="/">Example</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu dropdown logged-in-dropdown" data-dropdown-menu>
                <li class="is-dropdown-submenu-parent">
                    <a href="#">Hi {{ Auth::user()->name }}</a>
                    <ul class="menu vertical jt-is-dropdown-submenu">
                        <li><a href="/dashboard">Dashboard</a></li>
                        <li><a href="/questionnaire/new">New questionnaire</a></li>
                        <li><a href="/profile/edit">Account settings</a></li>
                        <li><a href="/logout">Logout</a></li>
                    </ul>
                </li>
        </ul>
    </div>
</div>

Jade about 2 years ago

@Joe Tannorella  --  Thanks, but still didn't work :(

 

I'm sure you probably would have posted here if you found a fix, but can't hurt to ask... Did you ever find anything that worked? I hate Bootstrap, but the menu doesn't do this, so I'm currently trying to find a way to implement JUST the bootstrap menu without messing anything up.

George Drakakis almost 2 years ago

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.