我的问题是关于带有ASP.Net和XML的菜单 我在这里使用3件事-主文件中的ASP菜单控件,菜单从其中加载到控件的XML文件。 ASP代码:
<div class="menuxml">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="XmlDataSource1" RenderingMode="List" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" >
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="Text" ValueField="Value"
NavigateUrlField="Url" />
<asp:MenuItemBinding DataMember="SubMenu" TextField="Text" ValueField="Value"
NavigateUrlField="Url" />
</DataBindings>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="main_menu" />
<asp:MenuItemStyle CssClass="level_menu" />
</LevelMenuItemStyles>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Files/menus.xml" XPath="/Menus/Menu"></asp:XmlDataSource>
</div>
XML文件:
<?xml version="1.0" encoding="utf-8" ?>
<Menus>
<Menu Url="~/" Text="Home" Value="Home Page" />
<Menu Url="~/icp/" Text="Coding problems" Value="Coding problems" />
<Menu Url="javascript:;" Text="DS & Algo. ▾" Value="DS & Algo.">
<SubMenu Url ="~/data-structure-tutorial/" Text="Data Structure" Value="Data Structure"></SubMenu>
<SubMenu Url ="~/algorithms/" Text="Algorithms" Value="Algorithms"></SubMenu>
</Menu>
<Menu Url="javascript:;" Text="Languages ▾" Value="Languages">
<SubMenu Url ="~/c/" Text="C" Value="C language"></SubMenu>
<SubMenu Url ="~/cpp-tutorial/" Text="C++" Value="C++ language"></SubMenu>
<SubMenu Url ="~/stl/" Text="C++ STL" Value="C++ STL"></SubMenu>
<SubMenu Url ="~/java/" Text="Java" Value="Java language"></SubMenu>
<SubMenu Url ="~/python/" Text="Python" Value="Python language"></SubMenu>
<SubMenu Url ="~/dot-net/" Text="C#.Net" Value="C#.Net"></SubMenu>
<SubMenu Url ="~/android/" Text="Android" Value="Android"></SubMenu>
<SubMenu Url ="~/kotlin/" Text="Kotlin" Value="Kotlin"></SubMenu>
<SubMenu Url ="~/sql/" Text="SQL" Value="SQL"></SubMenu>
</Menu>
...
..
CSS文件:
<style>
.menuxml{
background-color: #006969;
color: #ffffff;
font-size: 95%;
font-weight: 500;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
}
.main_menu,
.main_menu:visited,
.main_menu:hover {
text-align: center;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 8px;
padding-left: 5px;
padding-right: 5px;
display: inline-block;
}
.main_menu:hover {
background-color: #004949;
color: #ffffff;
}
.level_menu,
.level_menu:visited,
.level_menu:hover {
min-width: 100px;
border-bottom:1px solid #ccc!important;
background-color: #f1f1f1;
color: #000000;
text-align: left;
height: 30px;
line-height: 30px;
padding-left: 7px;
padding-right: 5px;
}
.level_menu:hover {
background-color: #004949;
color: #ffffff;
}
</style>
问题是:
菜单需要大约0.5到0.7秒的时间才能借出,同时其布局在所有设备上的网站上都非常混乱:
布局受干扰的时间不到一秒钟:
载入后的完美布局是:
问题?
有什么方法可以使它们快速运行,因为我既没有分析站点负载问题,也没有分析CSS问题。请帮帮我!
答案 0 :(得分:0)
请您遵循以下解决方案并分享您的看法:
您可以通过document.ready部分中的Jquery绑定菜单。