Question

I have a menu user control with image buttons like this one:

<asp:TableCell ID="tcDownload" runat="server" CssClass="MyMenuTableCellDownload" VerticalAlign="Top" >
    <asp:ImageButton ID="ibtnDownload" runat="server" ImageUrl="~/Images/MyMenu/tb_download_1.gif"
        CssClass="MyMenuIbtn" ToolTip="Download Results" />
</asp:TableCell>

In the codebehind, I handle the onclick for these to navigate to another page:

ibtnDownload.Attributes.Add("onclick", "document.location.href = '" + strNavUrl + "';return false");

Elsewhere in the user control, I have regular text menus like this one:

<asp:TableCell ID="tcMyMenuCust" runat="server">
    <asp:Menu ID="menuMyCust" runat="server" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" Orientation="Horizontal"
            CssClass="MyMenuCustomer" StaticMenuItemStyle-ItemSpacing="0px" DynamicMenuItemStyle-CssClass="MyMenuDynamicItem"
             StaticMenuItemStyle-CssClass="MyMenuStaticItem" DynamicHoverStyle-CssClass="MyMenuDynamicItemHover" DynamicVerticalOffset="0"
            StaticHoverStyle-CssClass="MyMenuStaticItemHoverCust" StaticEnableDefaultPopOutImage="false"
             DynamicPopOutImageUrl="~/Images/MyMenu/menu_arrow_grey.gif" DynamicMenuItemStyle-VerticalPadding="2" 
             DisappearAfter="0" OnMenuItemClick="menuMy_MenuItemClick">
        <Items>
            <asp:MenuItem Text="Customers" ImageUrl="~/Images/MyMenu/MyMenuGradientTransparent.png" Selectable="false">
                <asp:MenuItem Text="Domestic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" 
                    Value="Customer_Domestic",
                    NavigateUrl="~/MyMain.aspx?_page=DomCusts&_title=DomesticCustomers">
                </asp:MenuItem>
                <asp:MenuItem Text="International&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" 
                    Value="Customer_International"
                    NavigateUrl="~/MyMain.aspx?_page=IndCusts&_title=InternationalCustomers">
                </asp:MenuItem>
            </asp:MenuItem>
        </Items>
    </asp:Menu>
</asp:TableCell>

What I want to do is extend the menu choices by changing the image buttons to behave like the regular menus, while maintaining their look (image resource). That is, clicking on the image should result in a submenu dropping down to display subitems.

I know it’s possible to use properties such as StaticEnableDefaultPopOutImage to indicate that a menu item has child items. I also understand that menu items can have background images, but what if I simply want to use an image rather than text on a main menu item that drops down subitems when clicked?

Answer 1

This turns out to be fairly straightforward. In the example above, I provide an ID for the top level item (“Customers”) and remove the Text property, so that only the image refferred to in the ImageURL appears.