我在 asp.net 4.0 Web 应用程序中使用标准的 asp.net 菜单。澄清一下,它是一个标准的 Web 应用程序,它不是任何可用的 MVC 应用程序版本。
这是我遇到的问题。
这确实是一个相当简单的设置。我有 CSS 覆盖菜单的各种状态,:link、:visited、:hover 和:active。
正如您所怀疑的那样,这些状态之间存在明显的差异。此外,我运行了一些 javascript 来突出显示当前页面的链接,这是另一个相当正常的活动。到目前为止,没有什么神秘或晦涩的。
当人们开始点击菜单时,问题就来了。假设您在主页上。第一个菜单项被突出显示。现在让我们说 - 无论出于何种原因,只有用户可以想出 - 您单击并拖动其中一个菜单项。它不必很远,它可以只有一两毫米。预期的行为是拖动将否定单击,页面将保持在原处,并且单击拖动的菜单项将返回其先前的状态。
实际发生的是拖动否定了单击,页面保持在原位,并且单击拖动的菜单项似乎保留 :active 样式(如果存在),或者 :hover 样式(如果 :active 样式不存在)。
复制:
不过,这似乎是 Asp.Net 菜单中的一个错误。
为了尝试在我的项目之外复制问题,我使用 VS2010 中的模板创建了一个沼泽标准 Asp.NET Web 应用程序项目。
我在 Site.css 中更改了一行 - 具体来说,我将 div.menu ul li a:active 中的 :active 样式更改为 color: red;
然后我启动应用程序,单击主菜单项并将其拖动几毫米。
果然,当我放开鼠标按钮时,菜单项卡住了 :active 样式。
测试
我最初在 IE8 中发现了这个问题,但是在 IE9 以及 Firefox/Aurora 中仍然存在。
然而,Chrome 和 Safari 大部分情况下会将菜单项恢复到其预期状态。它们都在元素的边缘留下了发光的效果。我还没有在 Opera 中测试过。
....利润?
我已经在网上搜寻了解决此问题的方法,但找不到。事实上,很难找到该问题的参考资料,我最接近的是 Sitepoint 的参考页面之一,其中提到了类似于 IE7 中的错误的内容。
http://reference.sitepoint.com/css/pseudoclass-hover
有人有想法么?
代码
这是 Site.Master 中的代码 - 我已重命名菜单项以保护罪魁祸首:
<div class="topnav">
<asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" >
<items>
<asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem>
<asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem>
<asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem>
<asp:menuitem navigateurl="~/Hardware.aspx" text="Hardware" value="hardware"></asp:menuitem>
<asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem>
</items>
</asp:menu>
</div>
在此期间,我还将发布适用于此菜单的 CSS。
.right .topnavcont
{
width: 767px;
background-color: #dddddd !important;
height: 22px;
}
.topnav #topnav li
{
float: left;
}
.topnav
{
background-color: #ddd;
line-height: 22px;
float: right;
margin-right: 11px;
background: url(../img/shadow.gif) repeat-y top right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #777;
text-align: center;
}
.topnav li
{
width: 109px;
}
.topnav a:link, .topnav a:visited
{
color: #777;
display: block;
background-image: url(../img/bg_n-s.gif);
background-repeat: repeat-x;
text-decoration: none;
visibility: visible;
}
.topnav a:hover
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif);
display: block;
visibility: visible;
}
.topnav a:active
{
background-image: url(../img/bg_a-s.gif);
display: block;
color: #fff;
visibility: visible;
}
.topnav .current
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif) !important;
}
最后但并非最不重要的一点是,我在页面上运行的 javascript 来协助这个菜单。
$(function ()
{
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('.topnav ul li a').each(function ()
{
if ($(this).attr('href') == pathname)
{
$(this).addClass('current');
}
});
});