Menü springt beim Aufruf über PHP

Ich verwende ein benutzerdefiniertes Design, um unsere Website neu zu gestalten. Allerdings bekomme ich ein Problem, bei dem das Menü herumspringt und alle Links anzeigt, bevor es im Menü unter den übergeordneten Optionen schnell zusammenfaltet.

Hier ist die Aufstellungsort: http://volocommerce.staging.wpengine.com/

Dies ist jedoch der Code, den ich verwende:

 

Und hier ist das Skript für das mobile Menü / Scroll-Menü:

   $(function(){ $('.navbar ul li:has(ul)').addClass('dropdown'); $('.navbar navbar-collapse ul:has(li)').addClass('dropdown-menu'); $('.navbar ul li ul:has(li)').addClass('dropdown-menu'); $('.navbar ul li ul li:has(div)').addClass('yamm-content'); $('.navbar .lang_drop ul li ul:has(li)').addClass('single_drop'); $('.navbar .lang_drop ul li:has(ul)').removeClass(''); //yamm-fw $('.dropdown:has(a)').addClass('dropdown-toggle'); $('.more_menu').addClass('yamm-fw'); }); $(window).scroll(function(e){ $el = $('.head_con'); if ($(this).scrollTop() > 150 ){ $('.head_con').addClass('head_con_scroll'); $('.logo_con').addClass('logo_con_scroll'); $('.menu-item').addClass('menu-item_scroll'); $('.head_phone_con').addClass('head_phone_con_scroll'); $('.head_call_us').addClass('head_call_us_scroll'); $('.ceo_message').addClass('ceo_message_scroll'); } if ($(this).scrollTop() < 150 ) { $('.head_con').removeClass('head_con_scroll'); $('.logo_con').removeClass('logo_con_scroll'); $('.menu-item').removeClass('menu-item_scroll'); $('.head_phone_con').removeClass('head_phone_con_scroll'); $('.head_call_us').removeClass('head_call_us_scroll'); $('.ceo_message').removeClass('ceo_message_scroll'); } });  

Was ich versuche aufzuhören, ist dies, was jedes Mal passiert, wenn die Seite geladen wird – und es ist sehr frustrierend: Springendes Menü

Ich habe seitdem versucht, jQuery zu verwenden, um die Elemente beim Laden der Seite auszublenden, und dann die Ausblendungsklasse zu entfernen, sobald das Laden der Seite abgeschlossen ist – dies ist auch fehlgeschlagen 🙁

  $(document).on("pagecontainerbeforeload",function(){ $('.dropdown-menu').addClass('hidden-element'); }); $(document).on("pageload",function(){ $('.dropdown-menu').removeClass('hidden-element'); });   .hidden-element {display:none!important;}  

Solutions Collecting From Web of "Menü springt beim Aufruf über PHP"

Ich vermute, das ist ein CSS-Ladeproblem. Die Website lädt alle Ressourcen, bevor Sie das Stylesheet laden, das Ihre Untermenüs verbirgt (in Ihrem Fall dropdowns.less). Enqueuing .less in WordPress ist ein bisschen anders als Sie ein normales CSS-Stylesheet Enqueeing würde, so sollten Sie dies überprüfen.

Wenn das tatsächlich das Problem ist, sollte eine einfache Lösung, die funktionieren sollte, darin bestehen, die “display: none” -Regel in der style.css-Hauptkopie zu kopieren:

.dropdown-menu { display: none; }

Lass mich wissen, ob das funktioniert

Ich habe einige Zeit damit verbracht, den Code auf der Website zu verbessern – das war das Problem:

Löschen

  

von Zeile 55 des Headers, verschieben Sie es nach oben – noch war nicht 100% und es sprang noch ein bisschen …

Überprüfen Sie die Javascript-Datei – sehen Sie, es war eine alte Version, also verwenden Sie die CDN-Version (schnellere Ladezeiten auch)

Hinzufügen

  

zu Zeile 3 von “header.php”

Dann füge dieses Bit von CSS & jQuery oben in “Header.php” hinzu