Using styles with asp.net menu control

Suggested Videos
Part 151 - Assigning a master page dynamically
Part 152 - Master page content page user control life cycle
Part 153 - Menu control in asp.net



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.
<LevelMenuItemStyles>
    <asp:MenuItemStyle CssClass="MenuLevel1" />
    <asp:MenuItemStyle CssClass="MenuLevel2" />
</LevelMenuItemStyles>

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.
<LevelSelectedStyles>
    <asp:MenuItemStyle ForeColor="Yellow" />
    <asp:MenuItemStyle ForeColor="Maroon" />
</LevelSelectedStyles>

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);
        }
    }
}

HTML of the menu control used in the demo
<asp:Menu ID="Menu1" runat="server">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="MenuLevel1" />
        <asp:MenuItemStyle CssClass="MenuLevel2" />
    </LevelMenuItemStyles>
    <LevelSelectedStyles>
        <asp:MenuItemStyle ForeColor="Yellow" />
        <asp:MenuItemStyle ForeColor="Maroon" />
    </LevelSelectedStyles>
    <%--<StaticSelectedStyle ForeColor="Green" />
    <DynamicSelectedStyle ForeColor="Green" />--%>
    <Items>
        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" Value="Home">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/Employee.aspx" Text="Employee" Value="Employee">
            <asp:MenuItem NavigateUrl="~/UploadResume.aspx" Text="Upload Resume" Value="Upload Resume">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/EditResume.aspx" Text="Edit Resume" Value="Edit Resume">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/ViewResume.aspx" Text="View Resume" Value="View Resume">
            </asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/Employer.aspx" Text="Employer" Value="Employer">
            <asp:MenuItem NavigateUrl="~/UploadJob.aspx" Text="Upload Job" Value="Upload Job">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/EditJob.aspx" Text="Edit Job" Value="Edit Job">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/ViewJob.aspx" Text="View Job" Value="View Job">
            </asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin" Value="Admin">
            <asp:MenuItem NavigateUrl="~/AddUser.aspx" Text="Add User" Value="Add User">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/EditUser.aspx" Text="Edit User" Value="Edit User">
            </asp:MenuItem>
            <asp:MenuItem NavigateUrl="~/ViewUser.aspx" Text="View User" Value="View User">
            </asp:MenuItem>
        </asp:MenuItem>
    </Items>
</asp:Menu>

No comments