Part 154 Using styles with asp net menu control04:33

  • 0
Published on June 9, 2017

Link for code samples used in the demo

Link for all dot net and sql server video tutorial playlists

In this video, we will discuss applying styles to the asp.net menu control. This is continuation to Part 153, please watch Part 153 before proceeding.

To configure styles for the statically displayed portion of the menu, use
StaticMenuStyle – Applicable for the entire statically displayed portion of the menu
StaticMenuItemStyle – Applicable for the individual menu items in the statically displayed portion of the menu
StaticSelectedStyle – Applicable for the selected menu item in the statically displayed portion of the menu
StaticHoverStyle – Applicable for the statically displayed menu item over which mouse is hovered over

To configure styles for the dynamically displayed portion of the menu, use
DynamicMenuStyle – Applicable for the entire dynamically displayed portion of the menu
DynamicMenuItemStyle – Applicable for the individual menu items in the dynamically displayed portion of the menu
DynamicSelectedStyle – Applicable for the selected menu item in the dynamically displayed portion of the menu
DynamicHoverStyle – Applicable for the dynamically displayed menu item over which mouse is hovered over

To configure styles for each level in the menu control, use
LevelMenuItemStyles – If the menu control has 2 levels, you will have the html as shown below. MenuLevel1 css class will be applied for menu items at level 1. Along the same lines MenuLevel2 css class will be applied for menu items at level 2.

LevelSelectedStyles – If the menu control has 2 levels, you will have the html as shown below. Yellow color will be applied for the menu item selected at level 1. Maroon color will be applied for menu item selected at level 2.

If you are following along with the example in the demo, for LevelSelectedStyles, StaticSelectedStyle and DynamicSelectedStyle to work, you need the following code in Page_Load of the master page.
protected void Page_Load(object sender, EventArgs e)
{
foreach (MenuItem item in Menu1.Items)
{
Check(item);
}
}

private void Check(MenuItem item)
{
if (item.NavigateUrl.Equals(Request.AppRelativeCurrentExecutionFilePath, StringComparison.InvariantCultureIgnoreCase))
{
item.Selected = true;
}
else if (item.ChildItems.Count ] 0)
{
foreach (MenuItem menuItem in item.ChildItems)
{
Check(menuItem);
}
}
}

Enjoyed this video?
"No Thanks. Please Close This Box!"