0

我在 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');
        }
    });
});
4

1 回答 1

0

在扯掉我的头发并考虑从事篮子编织之后,我想我已经设法想出了一个半生不熟的解决方案。

秘密在于 Asp.Net Menu 控件完全无法正确处理 css 伪类。

在上面的代码中,您可以看到我定义了一个 a:active 伪类,这就是问题所在。

Asp.Net 不希望您使用伪类,它希望您在设计时使用 Web 控件中公开的属性。因此,不要仅仅坚持使用古老的 :link:visited:hover:active 伪类,而是应该设置属性staticselectedstyle-cssclass

不一定是坏事,尽管它看起来有点冗长和违反直觉。

不过要记住的是要确保以元素为目标的 :active 伪类不在staticselectedstyle-cssclass代码之前,因为出于某种原因,浏览器似乎只从每个类中获取点点滴滴,与此同时,一切都错了。

所以现在,我的 topnav 的 CSS 看起来像这样:

.topnav
{
    background-color: #ddd;
    /*margin-top: 1px;*/
    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 #topnav li
{
    float: left;
}

.right .topnavcont
{
    width: 767px;
    background-color: #dddddd !important;
    height: 22px;
}

.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 .staticmenuitemselected
{
    color: #777;
    display: block;
    background-image: url(../img/bg_n-s.gif);
    background-repeat: repeat-x;
    text-decoration: none;
    visibility: visible;
}

不过,我还没有完全完成对 :active 伪类的试验,因为我确实希望单击菜单上的按钮的行为在它执行那种华丽的点击操作时给我一个温暖的模糊光晕。

感谢您阅读/希望这对某人有所帮助。

于 2012-04-05T08:16:09.370 回答