Click here to Skip to main content
15,917,611 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

XML
<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 !
Posted
Updated 31-Jul-12 4:13am
v4

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:
HTML
<staticmenuitemstyle cssclass="selected" />
<staticselectedstyle cssclass="selected" /> 


you should make diffrent in cssclass of them

HTML
<staticmenuitemstyle cssclass="Menuselected" />
<staticselectedstyle cssclass="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:
C#
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;
    }
}
 
Share this answer
 
v2
Comments
Taresh Uppal 1-Aug-12 3:35am    
Here is my CSS : .menu-panel{width:219px; float:left;border-right:#789bc9 1px solid; margin-right:8px;}
.menu-panel ul li{ list-style:none;}
.menu-panel ul li a {height:32px; display:inline-block; width:208px; text-decoration:none; font-size:13px; line-height:32px;
color:#204d89; background:url(../images/menu-bt.jpg) repeat-x; padding:0 0 0 10px;}
.menu-panel ul li a:hover,.menu-panel ul li a.selected{color:#000; background:url(../images/menu-btho.jpg) repeat-x;}

.menu-item{color:#4997c4; font:bold 15px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; text-decoration:underline; padding-left:0px; display:block;}
.menu-item:hover{color:#063;text-decoration:none;}
Taresh Uppal 3-Aug-12 2:12am    
Hey thank you so much for your awesome suggestion. I am almost about to win the situation. It is selecting the items as per my navigation however what I want is to change the color of the background of my menu item which is running at the moment. Is there any property except selected which can help me out ?? I am using external CSS class, is this the reason I am not able to do this ????
Please guide me !
Taresh Uppal 3-Aug-12 2:35am    
Hey I did it...Called a external class for the same...thanx a lot...a zillion times :)
Dan Steuer 3-Aug-12 7:19am    
Glad I got you pointed in the right direction :)
1- did you use link tag on header?
2- your wrong is this:
HTML
<staticmenuitemstyle cssclass="selected" />
<staticselectedstyle cssclass="selected" />

you should make diffrent in cssclass of them
HTML
<staticmenuitemstyle cssclass="Menuselected" />
<staticselectedstyle cssclass="selected" />

3- use StaticDisplayLevel
4- StaticMenuItemStyle has Forecolor property
5- you can use this too:
HTML
a:activated
{
your styles
}


but you should be carefull for other hyperlinks on webpages
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900