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

1 Views

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/

Read More

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

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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;
}

  2. 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.