jQuery Vertical mega menu sub menus flashing on load. How to stop it from flashing in wordpress

Question

I have a wordpress web site with Twenty Eleven Child Theme. In my sidebar I've embedded a jQuery Vertical Mega Menu widget from:

http://wordpress.org/extend/plugins/jquery-vertical-mega-menu/

The menu works fine. The only problem is that when the web site loads there is a short FOUC (Flashing of unstyled content).

http://en.wikipedia.org/wiki/Flash_of_unstyled_content

I don't know how to prevent it from flashing. I read a few similar questions with solutions but I can't figure out how to apply it to my child theme.

Some say you have to add jQuery(document).ready(function() {. But where in? I tried to add it into my child theme's functions.php:

<?php 
....
.....


function id_scripts() {
   jQuery(document).ready(function() { echo 'test'});
}
add_action('wp_enqueue_scripts', 'id_scripts');

>

But it gives me a parse error saying:

Parse error: syntax error, unexpected T_FUNCTION, expecting ')' in /..../functions.php on line 28

can you remove the code you added and revert to previous state? — Surjith S M, Mar 08 '13 at 13:22
ok I commented the jQuery(document) part out in the functions.php — es1, Mar 08 '13 at 13:28
jQuery cannot be put into the functions file. That is PHP code. I would try putting the jQuery in it's own block in the header file. So — Ryan, Mar 12 '13 at 22:11
Plus, jQuery(document).ready can not go inside a function. You can use that in a .js file or inside 'script' tags. The use of that block is to tell your page to do stuff on the event of loading the page. — madaaah, Mar 14 '13 at 19:55

CWSpear · Answer 1 · 2013-03-27T07:12:39.383

First off, it appears you're adding JavaScript to PHP. That's why you have the error.

Regarding the issue with the flashing menu, you should set the submenu to display: none; in the CSS. Looking at the plugin, it is setting it (the submenu) to display: none;, but it doesn't fire until after the DOM is loaded (which afters a short time after the page starts loading, but enough to see that "flash"), so by setting it to display: none; in the CSS, it will load hidden and will open when hovered over.

Specifically, by looking at the plugin in the link, try adding the following to your CSS:

.dcjq-vertical-mega-menu .sub-container {
    display: none;
}

score 0 · Answer 2 · answered Dec 11 '13 at 00:38

As a followup to CWSpear's answer, I would recommend creating a custom CSS class for this purpose that you can also apply to any other elements that should be hidden until activated by JS. I like to name this class .js-hide — Twitter Bootstrap uses .collapse.

jQuery Vertical mega menu sub menus flashing on load. How to stop it from flashing in wordpress

2 Answers2