尝试编写JavaScript以隐藏切换侧菜单类，直到页面加载完毕。 当前显示一秒钟，直到页面加载

Question

EDIT- Got it figured out, answer is below, thanks everyone!

I'm back with another head scratcher that I've been working on all morning and can't seem to solve on my own and was hoping someone would help out this rookie.

I currently have a problem with my phpbb forum when in responsive mode on my phone (can't duplicate it on desktop using mobile view, but it is happening on my phone and I assume most other phones since mine isn't much different than any other android).

So my problem is that my toggle side menu is loading before I would like it to. The easiest way to explain is with a picture I made (couldn't screenshot it because it doesn't stay long enough).

As you can see, for about a second (or fraction of a second, just long enough to bug me), the header expands and the menu items are visible. It doesn't show exactly as it would if the toggle was activated, for some reason, only the text and border items are visible. The background color does stay hidden. The background of the header does expand with the text, which is shouldn't do with when the toggle is activated, so I'm not exactly sure what I need to do, hoping I can get some help.

I didn't just come here hoping someone could do this for me, I've tried many many options.

I saw a similar question where it was advised to use #selector within the .css, but I had no luck with that.

I've tried this script code:

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

The code does nothing for me. I've also tried substituting .gf-menu-device-wrapper-sidemenu but nothing with that either.

Here's the html code for that menu, The javascript file is minified and nearly impossible for me to get anything out of, but if anyone would like to look at it, it's here: 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

You can use

display: none;

as it has been mentioned. Though if you need to use calculations like height, etc before showing it, like contentHeight etc., this is not appropriate.

In this case you may use

opacity: 0.015;

or similar in CSS or even inline, and reset the opacity to 1 after hiding it via JavaScript. This way it may not be that disturbing.

(Yes I know, inline CSS is ugly but blinking boxes are more that.)

Answer 2

Here's how I did it, thanks for the help guys. Changed the inline css to display:none, then this script got it working:

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

See anything wrong with what I did? It works, but perhaps I could have done it different?