Jay,
I completely agree with your pov; it's ridiculous that Microsoft didn't make it more accessible to accomplish this task directly. So, I took it to task to find a way to make this control work with rollover capability without too much hassle, and I believe that I have found a nice solution, though it may not be the most efficient one. It certainly works, but if any of you out there can find a way to make this more efficient, have at it! The gist of my solution is that it exploits the Text property of the MenuItem object to output an html <img> tag instead of just description text.
(Note: Code is in C#)
1.) create your menu control in your aspx page:
<asp:Menu ID="RolloverMenu" runat="server"></asp:Menu>
2.) Create a Parent method to call the child method we will use to generate each menu item:
/// <summary>
/// Generates Rollover Button Items
/// </summary>
protected void GenMenuItems()
{
addRolloverMenuItem(RolloverMenu, "Default.aspx", "Go to the Home Page", "images/HomeBtn.gif", "images/HomeBtnOver.gif", "images/HomeBtnDwn.gif");
addRolloverMenuItem(RolloverMenu, "about.aspx", "See who we are", "images/AboutBtn.gif", "images/AboutBtnOver.gif", "images/AboutBtnDwn.gif");
addRolloverMenuItem(RolloverMenu, "search.aspx", "Search the site", "images/SearchBtn.gif", "images/SearchBtnOver.gif", "images/SearchBtnDwn.gif");
}
3.) Create the child method which will generate each menu item
/// <summary>
/// Adds a Roll-Over Menu item
/// </summary>
/// <param name="theMenu">The menu to which this menu item will be added</param>
/// <param name="navUrl">The Destination URL</param>
/// <param name="toolTip">The test to be placed inside the alt attribute</param>
/// <param name="src">The Image's normal state</param>
/// <param name="srcOver">The Image's state when the mouse hovers over it</param>
/// <param name="srcDown">The Image's state when the button has been clicked</param>
protected void addRolloverMenuItem(Menu theMenu, String navUrl, String toolTip, String src, String srcOver, String srcDown)
{
// Don't write the menu item if it reflects the current page
string currentPage = Request.ServerVariables["URL"].ToString();
currentPage = currentPage.Substring(currentPage.LastIndexOf("/") + 1).ToLower();
if (currentPage != navUrl.ToLower())
{
// These objects are necessary in order to capture the image object into a rendered html format
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter();
HtmlTextWriter htmWriter = new HtmlTextWriter(sw);
HtmlImage image = new HtmlImage();
image.Style.Add("border-style", "none");
MenuItem theMenuButton = new MenuItem();
theMenuButton.NavigateUrl = navUrl;
theMenuButton.ToolTip = toolTip;
image.Src = src;
if (srcOver != "" && srcOver != null)
image.Attributes["onMouseOver"] = "this.src='" + srcOver + "';";
if (srcDown != "" && srcDown != null)
image.Attributes["onMouseDown"] = "this.src='" + srcDown + "';";
image.Attributes["onMouseOut"] = "this.src='" + src + "';";
image.RenderControl(htmWriter);
theMenuButton.Text = sw.ToString();
theMenu.Items.Add(theMenuButton);
}
}
4.) Generate the Menu Items:
protected void Page_Load(object sender, EventArgs e)
{
GenMenuItems();
}
Good Luck,
~Stephen
