ASP.NET Menu Image with Dropdown Text Subitems - asp.net

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 "
Value="Customer_Domestic",
NavigateUrl="~/MyMain.aspx?_page=DomCusts&_title=DomesticCustomers">
</asp:MenuItem>
<asp:MenuItem Text="International "
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?

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.

Related

ASP.NET Menu Control in Master page - Hilight selected menu item

I know this has been asked, and answered before, but I still can't get it to work. And I've boiled it down to this. If I specify a NavigateURL in a MenuItem, it does not work. If I don't, the menu item changes its style as expected when clicked. However, it is completely useless as a navigation menu, since it no longer takes you anywhere! :)
So to clarify, this works - selected item is hilighted as per specified style:
<asp:menu id="NavigationMenu" staticdisplaylevels="1" orientation="Horizontal" runat="server">
<staticselectedstyle backcolor="LightBlue" borderstyle="Solid" bordercolor="Black" borderwidth="1"/>
<items>
<asp:MenuItem Text="Home" Value="Home" />
<asp:MenuItem Text="Software" Value="Software" />
</items>
</asp:menu>
And this doesn't work - only change is adding NavigateURLs:
<asp:menu id="NavigationMenu" staticdisplaylevels="1" orientation="Horizontal" runat="server">
<staticselectedstyle backcolor="LightBlue" borderstyle="Solid" bordercolor="Black" borderwidth="1"/>
<items>
<asp:MenuItem NavigateUrl="/Default.aspx" Text="Home" Value="Home" />
<asp:MenuItem NavigateUrl="/Software.aspx" Text="Software" Value="Software" />
</items>
</asp:menu>
In this other post, the OP is using NavigateURLs, and has accepted the answer about StaticSelectedStyle. I don't get it.
I would like to understand how to keep the StaticSelectedStyle working, and use NavigateURLs, at the same time.
I should add that the menu is in the master page. The pages being navigated to use this master page.
Thanks!
-Sandra
EDIT:
Based on my reading on this topic, I think this doesn't work because the Menu control only knows where it is on a Postback. But if your menu item takes you to some other page, it is no longer a postback, and the menu control is loaded afresh and does not know which item was clicked.
Try adding some code to the Page_Load section of your master file to bounce the page name from the url against the NaviagteUrl from your menu item. Here:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
For Each item As MenuItem In NavigationMenu.Items
If Request.Url.AbsoluteUri.ToLower().Contains(Page.ResolveUrl(item.NavigateUrl.ToLower())) Then
item.Selected = True
End If
Next
End Sub
That is in VB.NET. It works, I tested it using your markup from above. I hope you can figure out how to fit that into your code.

asp.net how to change visibility of a menu item from load function in .cs

<div id = "menu2" style ="position:absolute;right:400px; margin-top: -55px;">
<asp:Menu ID="Menu2" runat="server" Height="16px" style="margin-left: 1125px"
Width="63px" Visible="False">
<Items>
<asp:MenuItem Text="Economics" Value="Economics" ImageUrl="~/images/dollar.png"></asp:MenuItem>
</Items>
</asp:Menu> </div>
The above code is located in .aspx page. In the load function in the .cs file , how can I change the visibility of this menu?
I can change the NavigationUrl via the following statement
Menu1.Items[0].NavigateUrl = AfeAttachment;
but I can't seem to adjust the visibility
Paste the following the code into the method you're using to change the menu's visibile attribute:
Menu2.Visible = true;

how to add menu at front

i am using menu control in asp.net and i am having already 4 menu items, but i want to add 3 more menu items at front.how to achieve this ?
<asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal"
CssClass="styleMenu" Width="100%" >
<Items>
<asp:MenuItem Text="Approval" Value="3"></asp:MenuItem>
<asp:MenuItem Text="Search" Value="4"></asp:MenuItem>
<asp:MenuItem Text="Admin" Value="5"></asp:MenuItem>
<asp:MenuItem Text="Report" Value="6"></asp:MenuItem>
</Items>
</asp:Menu>
I am writing the code for adding dynamic menu items as
MenuItem mnuTest = new MenuItem();
mnuTest.NavigateUrl = "";
mnuTest.Text = "Test";
MainMenu.Items.Add(mnuTest);
but the latest menu is adding at last , how to add at front as 1st menu item
MainMenu.Items.AddAt(0, mnuTest);

.NET 4.5: ASP Menu Item value displaying as a link?

In my code below the asp menu item value property is actually rendering as link text!
<asp:Menu ID="menuTop" runat="server" EnableViewState="true" Orientation="Horizontal" StaticSelectedStyle-CssClass="menuselected" SkipLinkText="">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/images/Menu_Home.jpg" Value="Home" />
<asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/images/Menu_Contact.jpg" Value="Contact"/>
</Items>
</asp:Menu>
According to the MSDN reference located at http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menuitem.value.aspx
The Value property is used to supplement the Text property by storing
any additional data associated with the menu item. This value is not
displayed in the control and is commonly used to store data for
handling postback events.
I need it to store values, why is it displaying as link text?
Try this code.
<asp:Menu ID="menuTop" runat="server" EnableViewState="true" Orientation="Horizontal" StaticSelectedStyle-CssClass="menuselected" SkipLinkText="">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" ImageUrl="~/images/Menu_Home.jpg" Value="Home" Text="" />
<asp:MenuItem NavigateUrl="~/Contact.aspx" ImageUrl="~/images/Menu_Contact.jpg" Value="Contact" Text=""/>
</Items>
</asp:Menu>
Nevermind, I figured it out. Looks like you need to set the Text value to "" and that prevents the value from displaying as text.

change a specific Picture in menu

Hi If any of you know how to change a specific Picture on ohver at menuItem in menu control
the code is like this
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False">
<Items>
<asp:MenuItem NavigateUrl="~/Homepage.aspx" ImageUrl="~/images/ONE.png" ></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/AboutUs.aspx" ImageUrl="~/images/SOME.png"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/ContactUs.aspx" ImageUrl="~/images/MENU.png"></asp:MenuItem>
</Items>
</asp:Menu>
Please show an example, thanks Please ,Please,Please,Please, I need it
You Looking to change this in the page code behind, and when are you trying to do this, on mouse hover or..?
If done in code behind:
NavigationMenu.Items[0].ImageUrl = "whatever.jpg";

Resources