jQuery Vertikale Megamenü-Untermenüs blinken beim Laden. So verhindern Sie, dass es in WordPress blinkt

Ich habe eine WordPress-Website mit Twenty Eleven Child Theme. In meiner Seitenleiste habe ich ein jQuery Vertical Mega Menu-Widget eingebettet von:

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

Das Menü funktioniert einwandfrei. Das einzige Problem ist, dass es beim Laden der Website zu einem kurzen FOUC (Flashing of unstyled content) kommt.

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

Ich weiß nicht, wie ich das Blinken verhindern kann. Ich habe ein paar ähnliche Fragen mit Lösungen gelesen, aber ich kann nicht herausfinden, wie ich sie auf mein untergeordnetes Thema anwenden soll.

Einige sagen, Sie müssen hinzufügen jQuery(document).ready(function() {. Aber wo rein? Ich habe versucht, es in die functions.php meines untergeordneten Themas einzufügen:

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


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

>

Aber es gibt mir einen Parsing-Fehler, der besagt:

Analysefehler: Syntaxfehler, unerwartete T_FUNCTION, erwartet ‘)’ in /…./functions.php in Zeile 28

Zunächst einmal scheint es, dass Sie JavaScript zu PHP hinzufügen. Deswegen hast du den Fehler.

In Bezug auf das Problem mit dem blinkenden Menü sollten Sie das Untermenü auf einstellen display: none; im CSS. Wenn Sie sich das Plugin ansehen, wird es (das Untermenü) auf eingestellt display: none;aber es wird erst ausgelöst, nachdem das DOM geladen wurde (was eine kurze Zeit nach dem Laden der Seite dauert, aber genug ist, um dieses “Flashen” zu sehen), also indem Sie es auf setzen display: none; Im CSS wird es versteckt geladen und geöffnet, wenn Sie mit der Maus darüber fahren.

Versuchen Sie insbesondere, indem Sie sich das Plugin im Link ansehen, Folgendes zu Ihrem CSS hinzuzufügen:

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

Als Fortsetzung der Antwort von CWSpear würde ich empfehlen, zu diesem Zweck eine benutzerdefinierte CSS-Klasse zu erstellen, die Sie auch auf alle anderen Elemente anwenden können, die ausgeblendet werden sollen, bis sie von JS aktiviert werden. Ich nenne diese Klasse gerne .js-hide — Twitter Bootstrap verwendet .collapse.