Versuchen Sie, JavaScript zu schreiben, um die Menüoption toggle side zu verbergen, bis die Seite geladen ist. Es wird derzeit für einen Bruchteil einer Sekunde angezeigt, bis die Seite geladen wird

Question

EDIT- Get it out, Antwort ist unten, danke an alle!

Ich bin zurück mit einem anderen Head Scratcher, an dem ich den ganzen Morgen gearbeitet habe und den ich nicht alleine lösen kann und hoffte, dass jemand diesem Rookie helfen würde.

Ich habe derzeit ein Problem mit meinem phpbb Forum im Responsive-Modus auf meinem Handy (kann nicht auf dem Desktop mit Mobile View duplizieren, aber es passiert auf meinem Handy und ich nehme die meisten anderen Telefone, da meins nicht ist viel anders als jeder andere Android).

Also mein Problem ist, dass meine Toggle-Seite geladen wird, bevor ich es möchte. Der einfachste Weg, dies zu erklären, ist ein Bild, das ich gemacht habe (ich konnte es nicht screenshot, weil es nicht lange genug bleibt).

Wie Sie sehen können, für etwa eine Sekunde (oder Bruchteil einer Sekunde, gerade lang genug, um Fehler mich), dehnt sich der Kopf und die Menüpunkte sind sichtbar. Es wird nicht genau so angezeigt, als ob der Schalter aktiviert wäre. Aus irgendeinem Grund sind nur die Text- und Rahmenelemente sichtbar. Die Hintergrundfarbe bleibt verborgen. Der Hintergrund der Kopfzeile wird mit dem Text erweitert, was mit der Aktivierung der Umschaltfunktion nicht zu tun ist. Daher weiß ich nicht genau, was ich tun soll, in der Hoffnung, dass ich Hilfe bekomme.

Ich bin nicht nur hierher gekommen, in der Hoffnung, jemand könnte das für mich tun, ich habe viele viele Möglichkeiten ausprobiert.

Ich sah eine ähnliche Frage, wo es empfohlen wurde #selector innerhalb der CSS zu verwenden, aber ich hatte kein Glück damit.

Ich habe dieses Script-Code versucht:

<script type="text/javascript"> 
// Short-form of `document.ready` 
$(function(){ 
    $(".gf-menu-device-container").hide(); 
    $(".gf-menu-toggle").on("click", function(){ 
     $(".gf-menu-device-container").toggle(); 
    }); 
}); 
</script> 

Der Code nichts für mich. Ich habe auch versucht, .gf-menu-device-wrapper-sidemenu zu ersetzen, aber auch nichts damit.

Hier ist der HTML-Code für das Menü, die JavaScript-Datei minimierte und fast unmöglich für mich etwas aus zu bekommen, aber wenn jemand um es betrachten möchte, ist es hier: https://raiderforums.com/styles/corvus/template/rt_js/mootools-core.js

<div style="display: block;" class="gf-menu-toggle"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</div> 

<div class="gf-menu-device-wrapper-sidemenu"> 
    <div class="gf-menu-device-container"> 
     <div class="gf-menu-device-container-wrapper"> 
      <ul class="gf-menu rt-desktop-menu l1 "> 
       <li class="items would follow"> 
      </ul> 
     </div> 
    </div> 
</div> 

Answer 1

Hier ist, wie ich es tat, vielen Dank für die Hilfe Jungs.Geändert, um die Inline-CSS display: none, dann ist dieses Skript habe es funktioniert:

<script type="text/javascript"> 
$(document).ready(function(){ jQuery('.gf-menu').fadeIn(1000); }); 
</script> 

nichts sehen falsch mit dem, was ich getan habe? Es funktioniert, aber vielleicht hätte ich es anders machen können?

Answer 2

Sie können verwenden

display: none; 

wie es erwähnt wurde. Obwohl, wenn Sie Berechnungen wie Höhe usw. vor dem Anzeigen benötigen, wie contentHeight usw., ist dies nicht geeignet. In diesem Fall

können Sie

opacity: 0.015; 

oder ähnlich in CSS oder sogar inline, und setzen Sie die Deckkraft auf 1 nach es über JavaScript versteckt. So kann es nicht so störend sein.

(Ja, ich weiß, Inline-CSS ist hässlich aber blinken Boxen sind das.)