Load bottom horizontal menu based on choice in first

Question

I have a horizontal menu in a DIV and I'd like to load a menu below it (also horizontal) based on what users choose in the top menu.

Right now I'm rendering the menus in a master page based on which content page is currently loaded. However, I don't know how to figure out which submenu option was chosen when a user clicks one of those.

What's the best approach to managing stacked horizontal menus in ASP.NET?

Answer 1

The following will show a main menu with 'A' and 'B', sub menu with 'A-1'/'A-2' or 'B-1'/'B-2' and a label that shows which sub menu item has been selected. Is that what you mean?

<div>
    Main menu:
    <asp:Menu ID="menu1" runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem Text="A">
            <asp:MenuItem Text="B">
        </Items>
    </asp:Menu>
</div>
<div>
    Sub menu:
    <asp:Menu ID="menu2" runat="server" Orientation="Horizontal">
    </asp:Menu>
</div>
<div>
    Selected sub menu item:
    <asp:Label ID="lbl1" runat="server">
</div>

protected void Page_Init(object sender, EventArgs e)
{
    menu1.MenuItemClick +=
        new MenuEventHandler(menu1_MenuItemClick);
    menu2.MenuItemClick += new MenuEventHandler(menu2_MenuItemClick);
}

void menu1_MenuItemClick(object sender, MenuEventArgs e)
{
    menu2.Items.Clear();
    menu2.Items.Add(new MenuItem(e.Item.Text + "-1"));
    menu2.Items.Add(new MenuItem(e.Item.Text + "-2"));
}

void menu2_MenuItemClick(object sender, MenuEventArgs e)
{
    lbl1.Text = e.Item.Text;
}