Menu
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="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>
638
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>
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!
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
