Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?

I have a regular Navigation menu in my site.master file of my ASP.NET project. I keep my application in server, however time to time when I start the application, or do a postback, my navigation menu like it is aligned vertically for a few seconds and when page loads completely, it is again horizontal.

How can I solve that issue ?

Not necessary but below are my codes (css & navigation menu):

<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

And the menu

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
                            <asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
                            <asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
                    </Items>
                </asp:Menu>

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can hide it immediately and once the whole page is loaded you should show it again. So, add a property Visible="false" to the asp:Menu element, then add a simple script to the page to show it when the page is fully loaded:

<script type='javascript'>
window.onload = function(){
    document.getElementById("NavigationMenuID").style.display = "block";
}
</script>

final snippet:

<asp:Menu ID="NavigationMenu" Visible="false" runat="server" CssClass="menu" EnableViewState="false"
                    IncludeStyleBlock="false" Orientation="Horizontal">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Administration" Value="Administration">
        <asp:MenuItem NavigateUrl="~/_Admin/AdminPanel.aspx" Text="Admin Panel" />
        <asp:MenuItem NavigateUrl="~/_Admin/RoleManager.aspx" Text="Role Manager" Value="RoleManager" />
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
    </Items>
</asp:Menu>
<script type='javascript'>
        window.onload = function(){
            document.getElementById("NavigationMenuID").style.display = "block";
        }
</script>

Method 2

This is called a FOUC or “Flash of unstyled content”. Typically this happens when scripts are called on a web page after the DOM has loaded. If you have a javascript or some sort of script adding classes/IDs to your menu, you will get a FOUC until the classes have been added. To avoid this, either target the menu without using the dynamically generated classes or add the classes manually and overwrite them with your script.

One other thing to note, CSS loads before rendering occurs. So if you see a FOUC, you are either loading the CSS asynchronously or updating your selectors after rendering has began.

Hope this helps!

Method 3

First thing while loading the page could be :

  $(document).ready(function(){
    // First line in the script.
     $('#NavigationMenuClientID').hide();

     //Other page scripts..
     .
     .
     .
     .
     .
     .
     // check navigation menu styles / scripts are loaded.
     $('#NavigationMenuClientID').show();
     // else use SetTimeout(function(){$('#NavigationMenuClientID').hide();},10);            
 });

Method 4

put your CSS in the head
put your JavaScript links just before the end <body> tag

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating