Содержимое многоуровневой навигации отображается при загрузке страницы

Question

У меня на веб-сайте есть многоуровневое раскрывающееся меню. Меню работает нормально, как и ожидалось. Но проблема в том, что содержимое выпадающего меню мигает при загрузке страницы. Я использовал плагин для интеграции меню. Ссылка на плагин . Также рабочий пример меню .

Я пробовал несколько вещей, таких как: изменение файлов js и css, версия файлов jquery. Но не повезло. Я видел ту же проблему в их примере, когда пытался воспроизвести их (я понял только если после интеграции). Я уже интегрировал его в нашу систему обмена сообщениями, и уже слишком поздно, чтобы полностью изменить его, поэтому я пытаюсь как-то это исправить. Я не уверен, смогу ли я пройти мимо моей рабочей копии здесь. Прикрепление скрипки для справки. Мой настоящий веб-сайт здесь.

Присоединение js скрипка для справки.

    <div class="page">
        <div class="header">
            <div class="header-menu">
                <div class="container">
                    <nav id="menu">
                        <a href="#" style="background-image: url(img/logo.png)"></a>
                        <ul>
                            <li class="SubmenuTabs IconHidden">
                                <a href="#"><i class="fas fa-home"></i> Tabs</a>
                                <ul>
                                    <li class="SubmenuMega">
                                        <a href="#">Lorem ipsum dolor</a>
                                        <ul>
                                            <li>
                                                <div style="background-image: url(img/1.jpg)"></div>
                                                <a href="#">Lorem ipsum dolor</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>   
                                            </li>
                                            <li>
                                                <div style="background-image: url(img/2.jpg)"></div>
                                                <a href="#">Dolor sit amet</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="SubmenuMega">
                                        <a href="#">Dolor sit</a>
                                        <ul>
                                            <li class="Selected">
                                                <a href="#">Lorem ipsum</a>
                                                <ul>
                                                    <li><a href="#">Lorem</a></li>
                                                    <li><a href="#">Ipsum dolor dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">Dolor sit amet</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum</a></li>
                                                    <li><a href="#">Dolor sit</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#">Lorem ipsum</a>
                                                <ul>
                                                    <li><a href="#">Lorem</a></li>
                                                    <li><a href="#">Ipsum dolor dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Ipsum dolor</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor sit</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Link</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#"></i> Submenu with flyouts</a>
                                <ul>
                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                    <li><a href="#">Dolor sit amet</a></li>
                                    <li>
                                        <a href="#">Ipsum dolor</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                        </ul>
                                    </li>
                                    <li class="SubSubmenuAlignRight">
                                        <a href="#">Link (flyout left)</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                    <li><a href="#">Dolor sit amet</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Lorem</a>
                                <ul>
                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                    <li><a href="#">Dolor sit amet</a></li>
                                    <li class="SubSubmenuInline">
                                        <a href="#">Link (with inline submenu)</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                            <li>
                                                <a href="#">Lorem (flyout)</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Lorem ipsum (flyout)</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                        </ul>
                                    </li>
                                    <li class="SubSubmenuAlignRight">
                                        <a href="#">Dolor sit amet (flyout left)</a>
                                        <ul>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li><a href="#">Dolor sit amet</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="SubmenuMega">
                                <a href="#">Mega</a>
                                <ul>
                                    <li>
                                        <a href="#">Lorem ipsum</a>
                                        <ul>
                                            <li><a href="#">Dolor sit amet</a></li>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li>
                                                <a href="#">Dolor sit amet (flyout)</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Ipsum dolor</a></li>
                                                </ul>
                                            </li>
                                            <li class="SubSubmenuAlignRight">
                                                <a href="#">Lorem ipsum dolor (flyout left)</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Dolor sit amet</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Dolor sit</a>
                                        <ul>
                                            <li><a href="#">Dolor sit amet</a></li>
                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                            <li>
                                                <a href="#">Dolor sit amet (flyout)</a>
                                                <ul>
                                                    <li><a href="#">Lorem ipsum dolor</a></li>
                                                    <li><a href="#">Ipsum dolor</a></li>
                                                    <li class="SubSubmenuAlignRight">
                                                        <a href="#">Lorem ipsum dolor (flyout left)</a>
                                                        <ul>
                                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                                            <li><a href="#">Dolor sit amet</a></li>
                                                            <li><a href="#">Lorem ipsum dolor</a></li>
                                                            <li><a href="#">Dolor sit amet</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">Amet</a>
                                        <ul>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Link</a></li>
                            <li class="SubmenuMega SubmenuFullwidth IconOnly">
                                <a href="#"><i class="fas fa-envelope"></i> Fullwidth mega</a>
                                <ul>
                                    <li>
                                        <div style="background-image: url(img/1.jpg)"></div>
                                        <a href="#">Link</a>
                                        <ul>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                            <li>
                                                <a href="#">Link (flyout)</a>
                                                <ul>
                                                    <li><a href="#">Link</a></li>
                                                    <li><a href="#">Link</a></li>
                                                </ul>
                                            </li>
                                            <li class="SubSubmenuAlignRight">
                                                <a href="#">Link (flyout left)</a>
                                                <ul>
                                                    <li><a href="#">Link</a></li>
                                                    <li><a href="#">Link</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div style="background-image: url(img/2.jpg)"></div>
                                        <a href="#">Link</a>
                                        <ul>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div style="background-image: url(img/3.jpg)"></div>
                                        <a href="#">Link</a>
                                        <ul>
                                            <li><a href="#">Link</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
                            <li><a href="#"><i class="fab fa-apple"></i> Apple</a></li>

                            <li class="AlignRight">
                                <a href="#">Align right</a>
                                <ul>
                                    <li>
                                        <a href="#">Link (with a flyout submenu)</a>
                                        <ul>
                                            <li><a href="#">Link with long text in it</a></li>
                                            <li><a href="#">Link</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </li>
                            <li class="AlignRight">
                                <a href="#"><i class="fas fa-search"></i></a>
                                <ul>
                                    <li>
                                        <form>
                                            <input type="text" />
                                            <input type="submit" value="zoek" />
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>

                </div> <!-- /container -->
            </div> <!-- /header-menu -->
            <div class="header-slider">

            </div> <!-- /header-slider -->
        </div> <!-- /header -->

        <div class="container">
            <h2>Some text</h2>
            <p>Some text</p>
        </div>

    </div> 


                        $(function() {
                            $(window).resize();
                        });
                        $('#menu').dmenu({
                            menu    : {
                                border          : false,
                                logo            : false,
                                align           : 'center'
                            },
                            item    : {
                                bg              : false,
                                border          : true,

                                fit         : [
                                    {
                                        items       : null,
                                        fitter      : 'icon-hide',
                                        order       : 'all'
                                    },
                                    {
                                        items       : null,
                                        fitter      : 'icon-only',
                                        order       : 'all'
                                    },
                                    {
                                        items       : ':not(.dm-item_align-right)',
                                        fitter      : 'submenu',
                                        order       : 'rtl'
                                    },
                                    {
                                        items       : ':not(.dm-item_align-right)',
                                        fitter      : 'hide',
                                        order       : 'rtl'
                                    }
                                ]
                            },
                            submenu : {
                                border          : false,
                                shadow          : true
                            },
                            subitem : {
                                bg              : true,
                                border          : true
                            }

                        });

Answer 1

Это связано с тем, что JS фактически скрывается после выполнения. Вы можете «спрятать» меню самостоятельно, добавив, где вы вводите стиль #menu, что-то вроде этого:

#menu {
  display: none;
}

Затем в вашем JS добавьте

$(document).ready(function() {
  $("#menu").css("display", "block"); // or any other value you use
});

Если это не поможет, попробуйте что-нибудь более радикальное:

$(window).load(function() {
  $("#menu").css("display", "block");
});

Это должно скрывать ваше меню при загрузке страницы, учитывая, что стили CSS размещены перед разметкой меню .

Answer 2

Вы можете скрыть меню, используя css:

#menu{display:none;}

и включать:

$(function() {
     $(window).resize();
    $('#menu').show();
});