在选择时突出显示现有菜单项. [英] Highlighting the presisting menu item on selection.

问题描述

我有一个主页，上面有三个菜单控件.当我在其上移动鼠标时，我可以更改鼠标所指向的特定菜单项的颜色，但是如果我单击某个菜单项，则说"HOME"，然后移至主页，我希望该Home项目应保持突出显示为只要我在主页上.我想更改菜单项的背景色，以针对特定的所选项目进行更改.我尝试在后面使用CSS和代码，但没有成功.我要在这里显示我的控制标记，请向我建议我要去哪里错了??
这是我的标记:

Hi,
I have a master page on which I have three menu controls. When I move the mouse on them I am able to change the color of a particular menu item on which the mouse is pointing but if I click on some item say HOME and I move to home page what I want that Home item should stay highlighted as long as I am on Home page. I want to change the menu item''s background color to be changed for the particular selected item. I tried using CSS and code behind but no go. I am showing my meny control mark up here and please suggest me where am I going wrong ???
Here is my markup:

<asp:Panel ID="pn_SuperAdmin" runat="server" CssClass="menu-panel">
<asp:Menu ID="Menu_SUPER_ADMIN" runat="server" Width="159px">
<Items>

<asp:MenuItem NavigateUrl="~/my-account-admin.aspx" ToolTip="Click to go on MY ACCOUNT page" Text="Home" Value="Home"></asp:MenuItem>

<asp:MenuItem Text="Add Client" Value="Add Client" Target="_blank" NavigateUrl="~/add-new-client.aspx" ToolTip="Click here to add a new Client"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/send-daily-email.aspx" Text="Send Daily Data" Value="Send Daily Data" ToolTip="Click here to send dialy data to Clients"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/sent-email-history.aspx" Text="Mail History" Value="Mail History" ToolTip="Click here to see email history of Dialy Email"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/log-manager.aspx" Text="Log Manager" Value="Log Manager" ToolTip="Click here to view the event logs"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/activity-admin.aspx" Text="Activity" ToolTip="Click here to see and download the daily uploaded data" Value="Activity"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/add-edit-normal-admin.aspx" Text="Add Normal Admin" ToolTip="Click here to add Normal Admin" Value="Add/Edit Normal Admin"></asp:MenuItem>

<asp:MenuItem NavigateUrl="~/change-password.aspx" Text="Change Password" ToolTip="Click here to change your Password" Value="Change Password"></asp:MenuItem>

</Items>

<StaticMenuItemStyle CssClass="selected" />
<StaticSelectedStyle CssClass="selected" />
                                    
<%-- <DynamicSelectedStyle CssClass="selected" />--%>
<DynamicMenuItemStyle CssClass="menu-item" />
</asp:Menu>
</asp:Panel>

我在面板上调用样式表类时会发生这种情况吗?我已经尝试了许多链接，但没有任何反应...
请帮忙！

Is this happening that I am calling a style sheet class on my panel ?? I have tried many links but nothing happend...
Please help !

推荐答案

首先，请看这里:通过菜单控件使用CSS和样式 [ ^ ]
这提供了样式化ASP.NET菜单所需的所有信息.

除此之外，您始终可以根据菜单检查当前URL，以查看是否存在匹配项，并为该项目动态添加样式. (这看起来有点野蛮).

另外，另一个建议是使用Web.sitemap数据源，而不是直接将菜单留在masterpage html中(如果您在其他地方使用相同的站点地图，则不会太杂乱，更易于管理).

不幸的是，我无法重现此问题，我复制了给定的html，它在我的测试环境中运行良好(假设我没有CssClasses，所以我只是删除了这些并创建了自己的).

如果这些都不起作用，您可以张贴为菜单分配的CSS吗?

感谢CSS，我可以说解决方案2将为您提供大部分帮助:

First, look here: Using CSS and Styles with the Menu Control[^]
This gives all the information needed to style an ASP.NET Menu.

Aside from that, you can always check the current URL against the menu to see if there is a match and dynamically add styling to that item. (this seems a bit brutish).

Also, another suggestion would be to use a Web.sitemap datasource instead of leaving the menu directly in the masterpage html (just a bit less messy and easier to manage in case you use the same sitemap elsewhere).

Unfortunately I can''t reproduce the issue, I copied the html given and it works fine in my test environment (given I do not have you CssClasses so I just removed those and created my own).

If none of this works, could you post the css you have assigned for the menu?

Thanks for the CSS, I can say that solution 2 will get you most of the way:

<staticmenuitemstyle cssclass="selected" />
<staticselectedstyle cssclass="selected" /> 

您应该对它们的cssclass进行区分

you should make diffrent in cssclass of them

<staticmenuitemstyle cssclass="Menuselected" />
<staticselectedstyle cssclass="selected" />

这是真的，但是您仍然缺少一件事，因为您自己在html中编码菜单，所以您还必须告诉它选择了哪一个.正如我之前建议的那样，请尝试使用站点地图，因为数据源将为菜单提供您当前的位置.

除了使用站点地图数据源之外，您还可以使用前面提到的代码隐藏来告诉菜单在给定页面上选择了哪个项目.我让您的html使用站点地图和代码隐藏选择.如果不告诉菜单您在站点中的位置，则不会将任何内容都设置为选定"，并且永远不会触发该CSS.

如果您真的打算使用html代码而不是站点地图，那么请在页面加载中指向设置所选项目的方向:
1)您需要获取当前URL
2)循环浏览菜单项
3)找到匹配项后，将该项目设置为selected

示例:

This is true BUT you are still missing one thing, since you are coding the menu yourself in the html you also have to tell it which one is selected. As I suggested before, try to use a sitemap if possible as the datasource will give the menu your current position.

Aside from using a sitemap datasource, you can use codebehind as I mentioned before to tell the menu which item is selected on a given page. I have your html working with both a sitemap and codebehind selection. Without something telling your menu where you are in the site nothing will ever be set as "selected" and will never trigger that css.

If you are really set on using html code instead of a sitemap then to point you in the direction to set an item as selected, in the page load:
1) you need to get current URL
2) loop through the menu items
3) once you find a match, set that item to selected

Example:

String absoluteURL;
absoluteURL = Request.Url.AbsolutePath;
int tmpI = absoluteURL.LastIndexOf("/");
String finalURL = absoluteURL.Substring(tmpI + 1).ToLower();

for (int i = 0; i < Menu_SUPER_ADMIN.Items.Count; i++)
{
    String tmpNav = Menu_SUPER_ADMIN.Items[i].NavigateUrl.ToLower();
    if (tmpNav.Contains(finalURL))
    {
         Menu_SUPER_ADMIN.Items[i].Selected = true;
    }
}

1-您是否在标题上使用了链接标记?
2-您的错是这样的:

1- did you use link tag on header?
2- your wrong is this:

<staticmenuitemstyle cssclass="selected" />
<staticselectedstyle cssclass="selected" />

您应该对它们的cssclass进行区分

you should make diffrent in cssclass of them

<staticmenuitemstyle cssclass="Menuselected" />
<staticselectedstyle cssclass="selected" />

3-使用StaticDisplayLevel
4- StaticMenuItemStyle具有Forecolor属性
5-您也可以使用此功能:

3- use StaticDisplayLevel
4- StaticMenuItemStyle has Forecolor property
5- you can use this too:

a:activated
{
your styles
}

但是您应该小心网页上的其他超链接

but you should be carefull for other hyperlinks on webpages

这篇关于在选择时突出显示现有菜单项.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！