Horizontal menu items:
<asp:MenuItem Text="Registration" Value="Registration"></asp:MenuItem>
<asp:MenuItem Text="Log In" Value="Log In"></asp:MenuItem>
<asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>
Problem: space between items is the same as the space between words in an item (Log In, About Us).
I'm looking for a property named "itemspace" or something like that, but, it seems there is no such one.
Or, maybe, there is?
<staticmenuitemstyle horizontalpadding="10"/>
Alternatively, I have used this approach:
<StaticMenuItemStyle ItemSpacing="10px"/>
Add border width as an alternative
<staticmenuitemstyle BorderWidth="20px" BackColor="Green" BorderColor="#ededed" forecolor="Black"/>
Related
Menu items don't display the hover image option with the following code. I believe I have done the CSS correctly. Suggestions?
<asp:Menu ID="mnuMain" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" runat="server">
<DynamicSelectedStyle CssClass="staticmenu" />
<StaticSelectedStyle CssClass="staticmenu" />
<StaticHoverStyle CssClass="staticmenu_hover" />
<DynamicHoverStyle CssClass="staticmenu_hover" />
<StaticMenuItemStyle HorizontalPadding="20px" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" ImageUrl="~/i/nest.jpg" Selected="true" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" ImageUrl="~/i/nest.jpg" />
</Items>
</asp:Menu>
.staticmenu
{
}
.staticmenu_hover
{
background-image:url('/i/bird_popup.gif');
}
I'm not sure how ASP adds the ImageUrl parameter to the element. But if it uses an inline style then it will always override your external CSS, and if it's an img element then your background-image style will have no visible effect.
I would suggest including both images as background-image styles in your CSS, and possibly using pure CSS to manage the image state, so it'd look more like this:
.staticmenu
{
background-image:url('/i/nest.jpg');
}
.staticmenu:hover
{
background-image:url('/i/bird_popup.gif');
}
Also note the image URLs in your CSS will be relative to the stylesheet's location, not the location of the document (unless there is a base tag specified in the head).
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);
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.
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";
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.