Why is jquery Mega Menu so slow to load?

Question

I am using jquery Mega menu and when my page loads it first shows all of the menus (including the sub menus) for a split second as it renders and then the submenus disappear and it looks like a normal horizontal men. It eventually loads and looks proper but its very distracting and looks a bit odd. I am able to replicate this on the example page above.

Its almost as its trying to hide the menu right after rendering

Does anyone know if there is a way to have this menu load "cleaner" without this jumpy incremental rendering ?

Answer 1

If you are using the $.ready() wrapper to call the initializer, it will wait until the entire page has completely loaded before readying the menu. You have 2 options:

1. Hide the menu using CSS prior to initalization.

2. Initialize the menu immediately after the markup for it.

Here is an example:

<ul id="menu">
    <li>...</li>
    ... giant menu ...
</ul>
<script type="text/javascript">
    $('#menu').giantMenu();
</script>

Edit: More...

The ideal really is to disable javascript and see how the page looks. You should not rely on javascript for your page to look normal. It might be as simple as adding a few classes which the Mega Menu adds during initialization.