导航菜单CSS加载缓慢，使之垂直几秒钟调整？ [英] Navigation Menu CSS loads slowly, causes it to align vertically for a few seconds?
问题描述
我在我的ASP.NET的项目我的Site.Master文件一个普通的导航菜单。我把我的服务器应用程序，但不时当我启动应用程序，还是做回发，我喜欢它的导航菜单几秒钟垂直对齐，并在页面加载完全，这是一次水平。
我怎样才能解决这个问题？
不是必要的，但下面是我的codeS（CSS＆安培;导航菜单）：
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;链接HREF =〜/风格/的site.css的rel =stylesheet属性类型=文/ CSS/＆GT;
＆LT; ASP：的ContentPlaceHolder ID =HeadContent=服务器＆GT;
＆LT; / ASP：＆的ContentPlaceHolder GT;
＆LT; /头＆GT;
和菜单
＆LT; ASP：菜单ID =NavigationMenu=服务器的CssClass =菜单的EnableViewState =假
IncludeStyleBlock =false的方向=横向＆GT;
＆LT;项目＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=家/＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=管理VALUE =管理＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ _admin / AdminPanel.aspx文本=管理面板/＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ _admin / RoleManager.aspx文本=角色管理器VALUE =RoleManager/＆GT;
＆LT; / ASP：菜单项＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ About.aspx文本=关于/＆GT;
＆LT; /项目＆GT;
＆LT; / ASP：菜单＆gt;
您可以立即将其隐藏，一旦整个页面的加载，你应该表现出来结果
添加属性可见=假你的 ASP：菜单标签结果
然后，一个简单的脚本添加到页面：
＆LT;脚本类型='JavaScript的'＆GT;
在window.onload =函数（）{
的document.getElementById（NavigationMenuID）的style.display =块。如果需要的话//或其他显示选项
}
＆LT; / SCRIPT＆GT;
您文档片断code必须是：
＆LT; ASP：菜单ID =NavigationMenu可见=假=服务器的CssClass =菜单的EnableViewState =假
IncludeStyleBlock =false的方向=横向＆GT;
＆LT;项目＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=家/＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ Default.aspx的文本=管理VALUE =管理＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ _admin / AdminPanel.aspx文本=管理面板/＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ _admin / RoleManager.aspx文本=角色管理器VALUE =RoleManager/＆GT;
＆LT; / ASP：菜单项＆GT;
＆LT; ASP：菜单项NavigateUrl =〜/ About.aspx文本=关于/＆GT;
＆LT; /项目＆GT;
＆LT; / ASP：菜单＆gt;
＆LT;脚本类型='JavaScript的'＆GT;
在window.onload =函数（）{
的document.getElementById（NavigationMenuID）的style.display =块。如果需要的话//或其他显示选项
// jQuery的版本：$（NavigationMenuID）显示（）;
}
＆LT; / SCRIPT＆GT;
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>
You can hide it immediately and once the whole of page was loaded you should show it
Add a property Visible="false" to your asp:Menu tag
Then add a simple script to the page:
<script type='javascript'>
window.onload = function(){
document.getElementById("NavigationMenuID").style.display = "block"; //or other display options if needed
}
</script>
Your snipped code must be:
<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"; //or other display options if needed
// jQuery ver: $("NavigationMenuID").show();
}
</script>
这篇关于导航菜单CSS加载缓慢，使之垂直几秒钟调整？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
