我正在使用asp:Menu具有无表格渲染模式的ASP.NET 4.0 Webforms页面上的控件:
<asp:Menu ID="MenuBase" runat="server" DataSourceID="SiteMapDataSourceMenu"
Orientation="Horizontal" CssClass="contentmenu" RenderingMode="List"
IncludeStyleBlock="false">
</asp:Menu>
菜单有一个水平主行,有5或6个菜单项,当用户将鼠标悬停在菜单项上时,其中一些菜单项打开垂直弹出菜单.
通常当发生任何回发并且页面再次呈现时,菜单"闪烁"一会儿(例如,半秒),这意味着:所有菜单项 - 包括弹出菜单中的项目 - 以一行或多行显示在他们恢复到正常预期状态之前彼此相互对立.
在所有菜单项"展开"显示的这个短暂时刻,菜单看起来如果在浏览器中禁用了Javascript.(似乎构建弹出菜单是通过在asp:menu控件中使用一些Javascript来实现的.)
这种行为非常难看,特别是对于一个大菜单(渲染短时间超过2或3行),整个页面内容在跳回到正常显示之前向下移动.
你知道这个问题的解决方案吗？
先感谢您!
(备注:我应该提一下,在升级到ASP.NET 4.0之前,我使用了CodePlex中着名的CSS友好菜单控件.我认为我不再需要CSS友好控件,因为asp:菜单版本4现在提供了一个内置的List渲染模式.据我所知,我没有使用CSS友好控件的闪烁,我认为这个控件没有使用Javascript.也许这是一个糟糕的一步.我是现在寻找一个解决方案,如果可能的话,不要回到CSS友好的菜单控件.)
编辑:
这种闪烁与浏览器无关,虽然在IE 8和7中最为明显.在IE 7(或IE 8中的兼容模式)中,它非常难看,因为菜单项以疯狂的对角线模式显示,甚至超过5或6行.
我需要设计一个基于CMS的网站,使用asp.net网页表格(c#)和MS SQL Server作为杂志网站的后端数据库,该网站每周都有问题.
样本数据
MagazinePages Table
PageID PageName LangID PagePositionNo PageURL PageInheritance //PageID
1 Home 1 10 Default.aspx 0
2 About Us 1 20 Page.aspx 0
3 PageOne 1 10 Page.aspx 2
4 PageTwo 1 20 Page.aspx 2
5 Media 1 30 Page.aspx 0
6 Video 1 10 Videos.aspx 5
8 News 1 40 News.aspx 0
9 Archive 1 50 # 0
10 Publication 1 60 Page.aspx 0
11 SpanishHome 2 10 Default.aspx 0
12 SpanisAboutUs 2 20 Page.aspx 0 …我正在使用Visual Studio 2010和ASP.NET 4.0将Menu控件呈现为HTML列表,因此我可以使用CSS来设置它.这是我在下面使用的代码
<asp:Menu ID="navlist" runat="server" Orientation="Horizontal"
SkipLinkText="" ClientIDMode="Static" DataSourceID="MenuSource"
MaximumDynamicDisplayLevels="0" IncludeStyleBlock="False"
StaticDisplayLevels="2">
</asp:Menu>
这将生成以下HTML
<!-- URL shortened -->
<script src="/WebResource.axd?...t=634066906994188146"type="text/javascript"></script>
<div id="navlist">
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
</ul>
</div>
乍一看,这看起来就像我想要的那样.但是,如果我打开WebResource.axd,则会有一大堆与菜单相关的JavaScript代码.此代码的一部分是将自己的内联样式应用于列表.使用FireBug我可以在javascript执行后查看HTML标记,它看起来像这样:
<div id="navlist" style="float: left;">
<ul class="level1 static" tabindex="0" style="position: relative; width: auto; float: left;" role="menubar">
<li role="menuitem" class="static" style="position: relative; float: left;">
<a href="link1.html" class="level2 static" tabindex="-1">Link 1</a>
</li><li role="menuitem" class="static" style="position: relative; float: left;">
<a href="link2.html" class="level2 static" tabindex="-1">Link 2</a></li>
</ul>
</div>
这些内联样式最终会影响我的页面布局.我不需要WebResource.axd中的任何脚本.如何防止此脚本在页面的最终标记中呈现？
我正在通过http://analyze.websiteoptimization.com运行我的公司网站,试图加快速度,减少不必要的重量.我正在浏览渲染页面的HTML源代码,并注意到ASP.net Menu控件添加了CSS样式表CDATA.
我添加了.elfabMenu img.icon {border-style:none; vertical-align:middle; 在样式表中查看它是否添加了未定义的CSS,尽管它仍然存在.
是什么原因在那里,我怎么摆脱它？
谢谢,洛基
/* <![CDATA[ */
#ctl00_ElfabMenu img.icon { border-style:none;vertical-align:middle; }
#ctl00_ElfabMenu img.separator { border-style:none;display:block; }
#ctl00_ElfabMenu img.horizontal-separator { border-style:none;vertical-align:middle; }
#ctl00_ElfabMenu ul { list-style:none;margin:0;padding:0;width:auto; }
#ctl00_ElfabMenu ul.dynamic { z-index:1; }
#ctl00_ElfabMenu a { text-decoration:none;white-space:nowrap;display:block; }
#ctl00_ElfabMenu a.static { padding-left:0.15em;padding-right:0.15em; }
#ctl00_ElfabMenu a.popout { background-image:url("/WebResource.axd?d=Vs-xm3V4xXyes-Nkxpn4TcXoSMRRIWln2M_xmx8FHGw0xawO9dtWkvxPKOuCep8TMQfm6ipPg_hERtowJQpR_GaQaYnKwCcyHxEw5R6i3rfaWcpT0&t=634509612784300257");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */