Question

我是asp.net的新手，所以我将非常感谢完整的代码答案。

我在asp.net上有一个网站，c＃i在site.master页面添加了一个菜单，如下所示：

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
            <Items>
                <asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
                <asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
                <asp:MenuItem Text="View &amp; Query" Value="View &amp; Query"></asp:MenuItem>
                <asp:MenuItem Text="API" Value="API"></asp:MenuItem>
            </Items>
        </asp:Menu>

我现在需要补充一点，当用户在特定页面上时，例如Pipes，那么右边的menuItem应该有不同的背景颜色。

我可以使用会话变量，但我不知道该怎么做。

任何人都可以为我写一个完整的例子吗？

提前谢谢

Answer 1

您不需要使用会话变量跟踪页面，因为当您选择菜单项时，asp.net会跟踪您选择的项目并为您生成自己的CSS类（在大多数情况下）。为了获得更好的可视化下载firebug for Firefox并查看HTML输出，你会看到他们将附加CSS样式，例如“asp-net.menu selectedItem”，然后你创建一个.selectedItem {} CSS类，然后它会自动拾取样式。

然而，如果我记得它可能有点微妙的样式微软控件，就像你从输出中检查源代码，它不完全是HTML友好的。

如果要使用Microsoft方法设置菜单项的样式，请转到此处http://msdn.microsoft.com/en-us/library/ms366731.aspx

然而，有一个名为CSSfriendly http://cssfriendly.codeplex.com/的库，它以纯HTML格式呈现控件，这使您可以更轻松地附加CSS类。例如：

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */
{
    width: 961px !important;
    cursor:pointer;
    background-color:#000000;
}

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */
{
    left: 0;
    background-color:#f8f8f8;
    width: 145% !important;
    max-width: 160px !important;
}

.CssAdapterMenu ul.AspNet-Menu ul li:hover /* Tier 2 cell */
{
    background: #636363 url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu ul.AspNet-Menu ul .AspNet-Menu-Selected{
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

.CssAdapterMenu li.AspNet-Menu-WithChildren li  .AspNet-Menu-ChildSelected {
    background: transparent url(../images/menu_bg_hover.png) no-repeat !important;
}

依此类推。这里有很好的文档，这是我首选的样式方法。

使用下面的解释修改您的代码。

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
<Items>
<asp:MenuItem Text="Home" Value="Home" ></asp:MenuItem>
<asp:MenuItem Text="Pipes" Value="Pipes"></asp:MenuItem>
<asp:MenuItem Text="View &amp; Query" Value="View &amp; Query</asp:MenuItem>
<asp:MenuItem Text="API" Value="API"></asp:MenuItem>
</Items>
<StaticMenuItemStyle CssClass="menuItem" />
<StaticSelectedStyle CssClass="selectedItem" />
<StaticHoverStyle CssClass="hoverItem" />
</asp:Menu>

然后在你的CSS中：

.normal{ 
background-color:#eaeaea; 
} 

.selected { 
background-color:#000000; 
}

.hover{
background-color:#FF0000; 
}

Answer 2

您可以使用

<DynamicSelectedStyle BackColor="#1C5E55" />

和

<StaticSelectedStyle BackColor="#1C5E55" />

除此之外，您NavigateUrl通常需要MenuItem属性。所以整个事情看起来像是：

<asp:Menu ID="mainMenu" runat="server" autopostback="true">
            <Items>
                <asp:MenuItem Text="Home" NavigateUrl="~/Home.aspx" 
                 Value="Home" ></asp:MenuItem>
    ...
            </Items>
            <DynamicSelectedStyle BackColor="#1C5E55" />
            <StaticSelectedStyle BackColor="#1C5E55" />
        </asp:Menu>

Answer 3

我不知道任何服务器端方法。我通常使用jQuery来使用客户端方法。为此，您应该为您的菜单CssClass。例如，CssClass="mymenu"

在Master Page的head标签内，执行此操作。

$(document).ready(function() {
    // not bothering about query strings and hash right now.
    var url = window.location.href.toString().split("/").pop();
    $(".mymenu a[href*='" + url + "']")
        .closest("li")
        .addClass("selected-item");
});

免责声明：我不知道服务器端这个看似微不足道的要求的解决方案。这就是我一直在使用的。哦!这段代码适用于ASP.NET 4.0。在此之前，渲染是使用table完成的。您可能希望将最近的更改为.closest("td")

Answer 4

我遇到了类似的问题，我无法对每个MenuItem进行样式化。使用这篇文章...

asp:MenuItem / CSS

...您可以使用以下代码：

<div>
    <asp:Menu ID="mainMenu" runat="server">
        <Items>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="HOME" />
            <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" />
        </Items>
    </asp:Menu>
</div>

和CSS：

div.menu ul li a[href*="Default.aspx"]  { background-color: rgb(100, 100, 100); }
div.menu ul li a[href*="Page1.aspx"]    { background-color: rgb(150, 50, 100); }

希望这有助于某人。： - ）

asp.net将类添加到当前menuItem

4 个答案: