Login
InternetHandholding.com ™

Asp.net Menu Select Both MenuItem and Parent and Highlight Them

If you have a website with a menu bar at the top, you can help your users to know where they are by highlighting the current page. Asp.net makes this easy as the menu control will select the current page. If the current page is on a page that is on the top menu bar, the user will see their page highlighted.

If you have a drop down menu, and the user selects an item on the drop down menu, the drop down menu item is highlighted, but the menu bar above the drop down menu is not highlighted. The user will not know which of the top sections they are in. The user will only see the highlighted page, when the user opens the drop down menu.

Many people want to highlight both the item on the drop down menu and the parent on the menu bar above. The problem is the Asp.net menu control only allows one selected item. If you select the parent on the menu bar, the page menu item on the drop down is de-selected.

This problem was raised many times on Stack Overflow and elsewhere, without a solution, so I present one here.

Current Page Selected

Highlighting the current page is easy with the Asp.net menu control, since the Asp.net menu control marks the current page with the class selected.

<ul class="level1">
<li><a class="level1 selected" href="/">Home</a></li>
...
Highlight Selected Item

You can then style the selected class.

a.selected {color:yellow;}
Select Menu Item

If you have turned viewstate off or for other reasons, you may need to select the menu item yourself programmatically. This you can do in various places. Once you locate the menu item that you want to select, you can select that item.

MenuItem currentpagemenuitem = ... // Code here to find the menu item
currentpagemenuitem.Selected = true;
Select Parent Menu Item

Once you have found the current page, you can select the parent.

MenuItem parentpagemenuitem = currentpagemenuitem.Parent;
parentpagemenuitem.Selected = true; 
// Problem is this de-selects the current page, if only this worked
Add a Class to Selected Parent Menu Item

The problem is selecting the parent page, de-selects the current page. You can only have one selected page. It would be nice if you could set a class on a MenuItem, like this.

// Would be nice, but does not work
parentpagemenuitem.Class = parentpagemenuitem.Class + " selected";
Set the Target to Self for the Parent Menu Item

The problem then becomes what property of the MenuItem can we set that will appear in the html and which we can select with a CSS selector. There are a couple of options. The option I like is setting the Target property to "_self". This will limit our solution to only highlighting pages that open in the same window.

parentpagemenuitem.Target = "_self"; 
Select and Style the Parent Menu Item Using the Target Attribute

Now all you have to do is to select the parent using the target attribute.

div.menu_bar a[target='_self'] {color:yellow;}

One got you is if you have styled a:visited to another color, it may override your CSS. You may need to add something like these.

div.menu_bar a.level1.selected:visited, 
div.menu_bar a.level1:visited[target='_self'] 
{color:yellow;}
Highlighting the Parent Page When the Current Page is Not on the Menu System

The next piece to the menu puzzle is highlighting the menu bar parent page when the page is not on the menu system. For example, this article is not on the menu system and does not appear on a drop down menu. When you go to the articles page, this menu appears as an item in list that make up the contents, not the navigation of the page. When you select this article, this article is the current page. The menu control does not select any page. However, you still want to have the Articles menu item highlighted at the top, which you can see the menu system used here does.

The solution is, for each page that is not in the menu system, you need to store what page to select. One way to do this is to store the desired selected page in control file in the folder with your pages that are not in the menu system. If there is no selected page, you can have your menu control read that file to find which page to select.

Bookmark Print