Hi I am trying to replace my ascii arrow with an image of an arrow to show that there is a submenu. I know how to put an image on the left of the text but cannot see how to put an image on the right. I have tried googling this and am out of luck.
Code:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/PrizeRedemption.aspx" Text="Prize Issuance">
<asp:MenuItem Text="Issue Bounty Prizes" NavigateUrl="~/IssueBountyPrize.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Administration"
Value="Administration" Selectable="False">
<asp:MenuItem Text="Users" Value="Users" NavigateUrl="~/Admin.aspx?mode=users"></asp:MenuItem>
<asp:MenuItem Text="Prizes" Value="Prizes" NavigateUrl="~/Admin.aspx?mode=prizes"></asp:MenuItem>
<asp:MenuItem Text="Tournaments >" Value="Tournaments" NavigateUrl="~/IssuePrizes.aspx">
<asp:MenuItem Text="Tournament Templates" Value="Tournament Templates" NavigateUrl="~/TournamentTemplates.aspx">
</asp:MenuItem>
</asp:MenuItem>
I would probably add a class to the MenuItem. Then use CSS background-position to position your image in the correct location.
Read CSS background-position documentation for more information.
Related
asp.net-4.5 , Visual-Studio-2013 , Win7.
Reproduced the problem on a minimized project : empty web application with 1 web-form with Dir=rtl (right-to-left) and a Menu control.
Works fine but the arrows are on the right side and I need them on the left side.
Here is what I get:
And this is what I need (I used Paint to make this image) :
There's a solution for this circulating around here but it's for asp.net-2.0. Not working for 4.5.
My code:
<%# Page Language="C#" CodeBehind="WebForm1.aspx.cs" Inherits="Arrow_RTL_in_Menu.WebForm1" %>
<!DOCTYPE html>
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server"
StaticPopOutImageUrl="~/Images/Left_Arrow.gif"
DynamicPopOutImageUrl="~/Images/Left_Arrow.gif">
<Items>
<asp:MenuItem Text="AAA" Value="AAA" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="AAA-1" Value="AAA-1" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="AAA-2" Value="AAA-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="AAA-3" Value="AAA-3" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="BBB" Value="BBB" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="BBB-1" Value="BBB-1" NavigateUrl="~/Default.aspx">
<asp:MenuItem Text="BBB-1-1" Value="BBB-1-1" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="BBB-1-2" Value="BBB-1-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="BBB-2" Value="BBB-2" NavigateUrl="~/Default.aspx"></asp:MenuItem>
<asp:MenuItem Text="BBB-3" Value="BBB-3" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
Any idea where to start looking would be very much appreciated! Thank you!
Got the answer in another forum :
In the menu properties list, under the "Layout" category", I changed the RenderingMode property to "Table".
My code now (where the change was made) :
<asp:Menu ID="Menu1" runat="server"
StaticPopOutImageUrl="~/Images/Left_Arrow.gif"
DynamicPopOutImageUrl="~/Images/Left_Arrow.gif" RenderingMode="Table">
<Items> .........
Works beautifully!!!
Gadi
I'm using a standard asp.net Menu control to display a menu on my page, and I have the text wrap option set to true. What I'd like to do is indent the wrapped text as a visual clue that its part of the line above.
I followed this question: Can you apply CSS only on text that is wrapped, i.e. the second and subsequent lines?
but I can't see how to format the MenuItem elements within the Menu control. Can this be referenced with CSS?
Not sure if this will help... but here is my html:
<asp:Menu ID="MSDSMenu" runat="server" Width="100%" CssClass="noPrint" ItemWrap="True">
<Items>
<asp:MenuItem Text="Search SDS" Value="Search MSDS" NavigateUrl="~/MSDS/SearchMSDS.aspx" />
<asp:MenuItem NavigateUrl="~/MSDS/ByDept.aspx?dept=Shipping%25%27%20OR%20UsageDept%20LIKE%20%27%25Receiving"
Text="Shipping / Receiving" Value="Shipping / Recieving" />
<asp:MenuItem NavigateUrl="~/MSDS/ByDept.aspx?dept=Other" Text="Other" Value="Other" />
</Items>
</asp:Menu>
There are several levels of styling on a menu:
<asp:Menu ID="Menu1" runat="server"
CssClass="menuBar_style" >
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="sub_style_top" />
<asp:SubMenuStyle CssClass="sub_style_lvl1" />
</LevelSubMenuStyles>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="item_style_top" />
<asp:MenuItemStyle CssClass="item_style_lvl1" />
</LevelMenuItemStyles>
<Items>
<asp:MenuItem />
<asp:MenuItem />
<asp:MenuItem />
</Items>
</asp:Menu>
there's the css for the Menu itself, but then you can also define LevelSubMenuStyles and LevelMenuItemStyles, with separate style items within both of those for each level of your menu (in your case only the one level by the looks of it).
I reccommend trying to apply your wrapping to the MenuItemStyle css as this affects the actual control (i.e. the text usually), SubMenuStyle affects the container around the control I think.
Hope that makes sense... it's awfully confusing business, your best bet is to play around with the different tags for a while until you get a feel for them in your own head and hopefully you'll see what I mean.
EDIT: I've just noticed this question is from two years ago! No idea how I ended up here, one minute I was browsing the latest questions and next... I'll leave the answer here in any case as menu styling has been a source of frustration for me in the past and this may help somebody else.
I have a asp:menu that stops functioning after I perform a search on my page. The search uses a update panel and is triggered by a submit button. Once the results are displayed on the page the menu hover effects stop working. It will no longer expand down on mouseover. The clickable links still work.
The menu is in the site's master page and is outside the update panel of the search control.
Thank you for any help!
This is the menu
<asp:Menu ID="Menu5" runat="server"
DynamicEnableDefaultPopOutImage="False"
Orientation="Horizontal"
RenderingMode="List"
StaticEnableDefaultPopOutImage="False"
StaticPopOutImageUrl="~/Images/DownArrow.png"
Visible="False" Font-Bold="False" ForeColor="Black">
<Items>
<asp:MenuItem PopOutImageUrl="~/Images/bullet.png" Selectable="False" Text="Add" >
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/CreateItem.aspx" ></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/CreateContact.aspx" ></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Update" Selectable="False" Value="Update">
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/UpdateItem.aspx" Value="Item"></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/UpdateContact.aspx" Value="Contact"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Approve" Selectable="False" Value="Approve" >
<asp:MenuItem Text="Item" NavigateUrl="~/Admin/ApproveItem.aspx" Value="Item"></asp:MenuItem>
<asp:MenuItem Text="Contact" NavigateUrl="~/Admin/ApproveContact.aspx" Value="Contact"></asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticMenuItemStyle HorizontalPadding="10px" />
</asp:Menu>
This is the Button Click event
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
string keyword = txtSearch.Text.Trim();
List<dynamic> results = SearchItems(keyword);
List<dynamic> Cresults = SearchContacts(keyword);
//bind and return
lv.DataSource = results;
lv.DataBind();
//Contact Bind return
LVC.DataSource = Cresults;
LVC.DataBind();
}
}
My solution is not to use the drag and drop menus from VS 2012. I replaced this with a Jquery Menu that wrote and have had no issues since.
I have this asp:menu with a few items and want to be able to set an item as active when I've clicked it.
Here it goes
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/pages/page_a.aspx" Text="PageA" />
<asp:MenuItem NavigateUrl="~/pages/page_b.aspx" Text="PageB" />
<asp:MenuItem NavigateUrl="~/pages/page_c.aspx" Text="PageC" />
</Items>
</asp:Menu>
This renders a menu looking something like this
PageA PageB PageC
When clicking something like PageB I'd like to be able to style it somehow, like adding a css or whatever returning this
PageA PageB PageC
Any advices where I can find some info or samples?
You can apply a CSS class or styles to a menu item using the 'selectedstyle' properties of the asp:Menu control, using syntax like this:
<staticselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
A more full example is described in this MSDN article.
EDIT in response to comment:
There is also the 'dynamicselectedstyle' property for dynamic menus which used the same syntax:
<dynamicselectedstyle backcolor=LightBlue
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
I have a menu control inside of an updatepanel. When I hover over a selected item, and then move back off of it, the css class gets set to staticSubMenuItem instead of staticSubMenuItemSelected. Is there a fix for this?
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Menu ID="SubMenu" runat="server" SkinID="subMenu" OnMenuItemClick="SubMenu_Click"
CssClass="floatRight" StaticMenuItemStyle-CssClass="staticSubMenuItem" StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected">
<Items>
<asp:MenuItem Text="Item 1" Value="0" Selected="true" />
<asp:MenuItem Text="Item 2" Value="1" />
</Items>
</asp:Menu>
</ContentTemplate>
</asp:UpdatePanel>
The problem is here:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemSelected"
If you have a different CssClass set for Selected and Hover, the problem is fixed. Create a "Hover" css class and change the above to:
StaticSelectedStyle-CssClass="staticSubMenuItemSelected"
StaticHoverStyle-CssClass="staticSubMenuItemHover"