Geek Answers Handbook

JQuery A vertical mega menu flashing at boot. How to stop it from blinking in wordpress

I have a Wordpress website with Twenty Eleven Child Theme. In my sidebar, I embedded the jQuery Vertical Mega Menu widget from:

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

The menu works great. The only problem is that when loading the website there is a short FOUC (Flashing uneven content).

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

I do not know how to prevent this. I read several similar questions with solutions, but I cannot figure out how to apply it to my child theme.

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

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

But this gives me a parse error saying:

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

+4
source share
2 answers

First off, it looks like you are adding JavaScript to PHP. That is why you have a mistake.

As for the problem with the blinking menu, you should set the display: none; submenu display: none; in CSS. Looking at the plugin, he sets it (submenu) to display: none; , but it does not work until the DOM loads (which after a short time after loading the page comes in, but enough to see that "), therefore, setting it to display: none; in CSS, it will be hidden and will open when freezing.

In particular, after looking at the plugin in the link, try adding the following to your CSS:

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

As an answer to the CWSpear question, I would recommend creating a special CSS class for this purpose, which can also be applied to any other elements that must be hidden before JS is activated. I like to call this class .js-hide - Twitter Bootstrap uses .collapse .

0
source

More articles:


All Articles