Question

我一直试图找到一种简单的方法来突出显示当前所选菜单项的asp.net菜单（因此用户知道他们在哪个页面上），但无论我尝试过什么，我都无法获得它工作。在我的标记中，我有：

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" StaticSelectedStyle-ForeColor="#99CCFF" DynamicSelectedStyle-ForeColor="#99CCFF">
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Operations"/>
        <asp:MenuItem NavigateUrl="~/Analysis.aspx" Text="Analysis"/>
        <asp:MenuItem NavigateUrl="~/Dashboard.aspx" Text="Dashboard"/>
        <asp:MenuItem NavigateUrl="~/Flashboard.aspx" Text="Flashboard"/>
        <asp:MenuItem NavigateUrl="~/Spacequest.aspx" Text="SQ OBP"/>
    </Items>
</asp:Menu>

在服务器端Page_Load函数：

((Menu)Master.FindControl("NavigationMenu")).Items[0].Selected = true;

但这不起作用。我尝试使用站点地图（即使站点地图不是我想要使用的），但这也没有用。有什么想法吗？

Answer 1

您可以在菜单中使用StaticSelectedStyle属性。

<asp:menu [...]>
        <staticselectedstyle backcolor="LightBlue"
          borderstyle="Solid"
          bordercolor="Black"
          borderwidth="1"/>

        [...]
</asp:menu>

请参阅here for more info。

此外，如果有一个类应用于所选项目（我不确定是否有它，但它会很方便）你可以简单地用你的CSS挂钩。这比使用StaticSelectedStyle属性更好。

<强>更新

值得注意的是，使用IncludeStyleBlock="false"会阻止您的菜单生成控制所选项目所需的CSS。

关闭样式块后，您必须提供自己的样式，并且不会使用自动生成的菜单样式。

来自MSDN：

如果将此属性设置为false，则无法设置样式属性。例如，您无法在其中添加DynamicHoverStyle-ForeColor属性在代码中标记或设置DynamicHoverStyle.ForeColor属性。

来源：http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menu.includestyleblock.aspx

Answer 2

我认为您必须遍历菜单项并查看当前页面URL是否包含菜单项的NavigateUrl。

foreach (MenuItem item in mn.Items)
{
   if (Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower()))
   {
      item.Selected = true;
   }
}

Answer 3

我会在这个例子中使用jQuery。

对于指定的页面，例如在Analysis.aspx页面上，将此位jquery添加到页面中。

$('#MenuItemID').addClass('active');

您可以指定菜单项的ID吗？

如：

<asp:MenuItem ID="AnalysisMenuItem" NavigateUrl="~/Analysis.aspx" Text="Analysis"/>

然后你会用它：

$('#' + <% AnalysisMenuItem.ClientID %>').addClass('active');

然后当然只需定义你的css中的active：

.active { background-color: #FFF; }

Answer 4

如果您打算动态制作，那么这是更好的方法：

Menu MyMenu = new Menu();
....
MyMenu.MenuItemDataBound += new MenuEventHandler(MyMenu_MenuItemDataBound);
TheMenu.StaticSelectedStyle.CssClass ="MySelectedClass";

    protected void MyMenu_MenuItemDataBound(Object sender, MenuEventArgs e)
    {
        if (e.Item.NavigateUrl.ToLower().Contains(Path.GetFileName(Request.FilePath).ToLower()))
        {
            //e.Item.Text = "<div style='color: Yellow'>" + e.Item.Text + " </div>";
            e.Item.Selected = true;
        }
    }

添加然后只需将.MySelectedClass样式添加到您的Css文件中 ..

Answer 5

//Master
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
            EnableViewState="False" Orientation="Horizontal"
            BackColor="#465C71" DynamicHorizontalOffset="2"      
            ForeColor="#DDE4EC">
          <StaticMenuItemStyle HorizontalPadding="15px" VerticalPadding="2px" />
          <StaticSelectedStyle BackColor="#FFFFFF" ForeColor="#000000"/>
        <Items>
            <asp:MenuItem NavigateUrl="~/Secure/About.aspx" Text="About"/>
            <asp:MenuItem  NavigateUrl="~/Secure/Login.aspx"  Text="Login"/>
        </Items>
    </asp:Menu>


//Master.cs
foreach (MenuItem item in ((Menu)this.FindControl("NavigationMenu")).Items)    
{
    if(Request.Url.AbsoluteUri.ToLower().Contains(item.NavigateUrl.ToLower().Substring(1)))
    {
        item.Selected = true;
    }
}

// item.NavigateUrl.ToLower（）包含“〜”。所以，找到子串并检查。

ASP.NET：突出显示当前页面的菜单项

5 个答案: