I have an asp:menu and I have for eg 3 menuItem: First Second Third and the second item have 2 submenuItems i want to show the 2 submenuitems only when I click on the Second menuitem not when I hover the mouse over. I'll put the code of menu here
<asp:Menu ID="Menu_WebSite" runat="server"
DynamicHorizontalOffset="10" TabIndex="1"
Font-Names="Verdana" Font-Size="12px"
StaticSubMenuIndent="10px" Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false" BackColor="#f0f0f0">
<StaticSelectedStyle ForeColor="Black" />
<DynamicHoverStyle BackColor="#f0f0f0" ForeColor="Black" />
<DynamicMenuItemStyle BackColor="#f0f0f0" HorizontalPadding="25px" VerticalPadding="3px" />
<DynamicMenuStyle BackColor="#f0f0f0" ForeColor="Black" />
<DynamicSelectedStyle BackColor="#f0f0f0" Forecolor="Black" />
<StaticHoverStyle BackColor="#f0f0f0" ForeColor="Black" />
<StaticMenuItemStyle BackColor="#f0f0f0" HorizontalPadding="10px" VerticalPadding="3px" />
<StaticItemTemplate>
<%#Eval("text")%>
</StaticItemTemplate>
</asp:Menu>
my answer is purely theoretical, so you may wish to hold out for someone willing to do leg work for you.
The hover styles can be controlled with CSS. It may be possible to write CSS to ensure the submenu items are hidden even when the user hovers over the main menu items, then change the CSS class dynamically with JavaScript when the user clicks the menu item.
Bearing in mind that clicking the menu item may cause a postback, you may need to show/hide the submenus in server code...
Also, you'll need to consider that you may need to hide the sub menus manually using the onClick event again.
Finally, you may wish to consider not using the ASP Menu for this, because it's designed to be used as a hover menu. You might be better off writing your own implementation, depending on whether you really need the ASP Menu functionality. There are many examples of good menus online, so you might find one that does what you're looking for with more ease. The ASP.NET TreeView control may provide you with a much closer starting point.
A quick Google throws up the following blog that may be what you're looking for:
http://msd-bml.blogspot.com/2008/09/aspnet-menu-click-instead-of-hover.html
Related
I have an asp.net menu with a few menuitems. 1 of the items has submenuitems.
Problem is that after clicking around on my site for a while, the menu's formatting will suddenly get messed up (the background image will only show in a tight rectangle around the text, and the text will be lower than the separator images) and the text of the menuitem with submenuitems has the phrase Expand MenuItem_Text added to it ("Setup" -> "Setup Expand Setup"), but it's not actually expandable.
I've discovered that logging out and then logging back in solves this, as does clearing the cache, however, I can't expect my users to know that.
I already have the AppleWebKit line in my code, so it's not that.
Edit:
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" BackColor="transparent"
StaticMenuItemStyle-ItemSpacing="0" StaticEnableDefaultPopOutImage="False" DynamicEnableDefaultPopOutImage="false">
<Items>
<asp:MenuItem NavigateUrl="~/Main.aspx" Text="Home" SeparatorImageUrl="~/Images/menubarmid.png" />
<asp:MenuItem Text="Setup" SeparatorImageUrl="~/Images/menubarmid.png" Selectable="false">
<asp:MenuItem NavigateUrl="~/ASetup.aspx" Text="A" />
<asp:MenuItem NavigateUrl="~/BSetup.aspx" Text="B" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Logout.aspx" Text=" Logout "></asp:MenuItem>
</Items>
<StaticHoverStyle CssClass="static_hover_style" />
<DynamicHoverStyle CssClass="dynamic_hover_Style" />
<StaticMenuStyle CssClass="static_menu_style" />
<DynamicMenuStyle CssClass="dynamic_menu_style" />
<StaticMenuItemStyle CssClass="static_menuitem_style" />
<DynamicMenuItemStyle VerticalPadding="3px" HorizontalPadding="10px" CssClass="dynamic_menuitem_style" />
</asp:Menu>
I came up with the same sort of issue and I found that setting the StaticPopOutImageTextFormatString property to an empty string made the equivalent of " expand Setup" to disappear .
It looks like Chrome was trying to display the alternate text for the pop-out image instead of simply not displaying an image to indicate that the link could pop out.
As such my asp code looked something like this:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" StaticPopOutImageTextFormatString="">
</asp:Menu>
This, in addition to the AppleWebKit code seems to allow my code to work. I did have to do a shift F5 in order to reset the cache every time I restart the test server.
I had this happen to an asp.net site of mine when it was deployed to a server. I eventually found that in IIS the target framework for the site was 2.0. I changed it to 4.0 and hey presto the sitemap menu worked as expected.
I have the following code and no matter what I try to do, it seems the ImageUrl on the SelectedNodeStyle is ignored. Am I doing something backwards?
Note that this thread is a continuation of ASP.Net TreeView with SiteMap is ignoring Node.Selected which asked a different question and revealed this new question.
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
<NodeStyle ForeColor="White" Font-Bold="true" NodeSpacing="5"
HorizontalPadding="5" ImageUrl="~/Images/Page.png" />
<SelectedNodeStyle Font-Bold="true" NodeSpacing="5"
HorizontalPadding="5" ImageUrl="~/Images/Page_Hot.png"/>
<HoverNodeStyle ForeColor="Navy" />
</asp:TreeView>
In the sample above, the selected node underlining works just perfectly. However, the image never changes. Yes, I double-checked the image was named correctly. It changes the other style attributes, just not the image. Quite frustrating.
Solution?
This seems to be a bug and goes back a few years (~2005, 2006). (Excuse the link-filled answer)
http://forums.asp.net/t/943367.aspx
http://connect.microsoft.com/VisualStudio/feedback/details/104297/treeview-selectednodestyle-imageurl-not-working
I would set it in code-behind instead.
I have created user control for menu bar and loading in Master page. User control has Link buttons. Now I want create drop down menu for one of Link buttons. I dont know, how to do that? Is there any other control that supports?
<asp:LinkButton ID="btnAttributeProcessing" CausesValidation="False" ForeColor="White" runat="server">Data Processing</asp:LinkButton> |
<asp:Label ID="lbLinks" ForeColor="White" runat="server"></asp:Label>
<asp:LinkButton ID="btnGroupsetup" CausesValidation="False" ForeColor="White" runat="server">Group Set-up</asp:LinkButton> |
<asp:LinkButton ID="btnRegressionConfiguration" CausesValidation="False" ForeColor="White"
runat="server">Regression Configuration</asp:LinkButton>
<asp:Label ID="lblConvPipe" ForeColor="White" runat="server"> |   </asp:Label>
<asp:LinkButton ID="btnDetailedGroupConfig" CausesValidation="False" ForeColor="White"
runat="server">Detailed Group Config</asp:LinkButton>
Probably the easiest route to take is the asp:Menu control. You can replace your asp:LinkButton controls with asp:MenuItem elements.
If you want a simple client-side solution (your question is tagged "jquery", so I suspect this is on the radar), you could put your sub-menus in <div> tags and then use the jQuery hover() function to show and hide the sub-menu <div> when the appropriate parent item is hovered.
If you have more than one or two sub-menus, you might investigate a full jQuery drop-down menu plug-in:
Superfish
Simple Dropdowns
I am currently moving some form fields on an existing webform into a modal popup window using the asp.net toolkit extender. One of the fields uses the toolkit's toggle button extender on a checkbox a works quite well. When I move the checkbox and extender into the modal popup div, the toggle button extender stops working.
After confirming the problem, I decided to try using a jquery plug-in called checkbox that provides the same function. Again this plugin worked as advertised until I moved it into the modal window div. I had hoped to avoid hand rolling a solution.
I am guessing that the problem has something to to with css positioning. I would love to hear possible fixes before I build a solution from scratch.
Edit
Here is my original approach with toggle button extender:
<!-- works fine here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<asp:Panel ID="pnlAddTransaction" runat="server" Width="600px" Height="300px" CssClass="ModalWindow">
<!-- doesn't work here - outside UpdatePanel but inside modal window div-->
<asp:UpdatePanel ID="udpAddTransaction" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<!-- This is the desired location but doesnt work here -->
<asp:CheckBox ID="chkUSDAdd" runat="server" CssClass="PriceEntryToggle" Checked="true" Visible="false" />
<ajaxToolkit:ToggleButtonExtender ID="tglCurrencyAdd" runat="server"
TargetControlID="chkUSDAdd"
CheckedImageAlternateText="Click here to enter price in CAD"
UncheckedImageAlternateText="Click here to enter price in USD"
UncheckedImageUrl="~/images/ButtonCAD.gif"
CheckedImageUrl="~/images/ButtonUSD.gif" />
<!-- etc-->
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="hdnInvestmentID" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeAddTransaction" runat="server"
TargetControlID="pnlAddTransaction" PopupControlID="pnlAddTransaction"
CancelControlID="btnCancel" OnCancelScript="hideAddTransactionPopup()"
BackgroundCssClass="modalBackground" />
I have also now tried placing a hidden field and an image and writing jquery click function. This also results in the same issue (stops working inside modal div).I can get code to run by hard coding onclick event attribute. I would love to understand why and if there are any more elegant ways to work around this. I guess I could try a jquery modal popup plugin, but I didn't plan to rewrite this whole page.
Take a look at your ModalPopupExtender Attributes. TargetControlID and PopupControlID are the same panel "pnlAddTransaction". The TargetControlID is the control that triggers the control at PopupControlID to display.
I'm struggling to find a solution for a weird issue with ASP.Net Menu control, when used in conjunction with Master Pages.
When the user navigates to a page - via. the menu - which inherits from the Master Page, the entire menu just expands and flashes across the screen. Collapses immediately and the page is rendered....
Causes some flickering on the screen, annoying for the users.
Now, there are a few work-arounds suggested for this:
- Commenting out the tag from the web.config.
- giving IDs to the Master Pages in their Page_Load events.
Tried'em all, dosen't seem to sort out my issue :(.
I'd take any ideas.
-HK
I remember seeing that at one point in a site of mine. Since then I ripped the menu out, but putting it back into my master page I don't see the flicker any more. Here's the code for a simple menu that works without flicker in a master page;
<asp:Menu ID="menu"
DataSourceID="sitemap"
runat="server" />
<asp:SiteMapDataSource
ID="sitemap"
ShowStartingNode="false"
runat="server" />
Not tried it myself, but how about setting the default class for the menu children to invisible (say, a class of invisibleMenu), which means it initially loads invisibly, and then using a bit of javascript to remove the invisibility? In jQuery, something like
$('.invisibleMenu').removeClass('invisibleMenu');
If I remember, I had the same problem and solve it in putting the menu in content place holder in the amster page:
<asp:ContentPlaceHolder ID="MenuZone" Runat="server">
<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="dsSiteMap" ImageSet="Simple"
NodeIndent="10" MaxDataBindDepth="3" ExpandDepth="0" OnTreeNodePopulate="TreeView1_TreeNodePopulate">
<SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555" HorizontalPadding="0px" VerticalPadding="0px"></SelectedNodeStyle>
<NodeStyle Font-Names="Verdana" Font-Size="8pt" HorizontalPadding="0px" ForeColor="Black" NodeSpacing="0px" VerticalPadding="0px"></NodeStyle>
<HoverNodeStyle Font-Underline="True" ForeColor="#DD5555"></HoverNodeStyle>
<ParentNodeStyle Font-Bold="False" />
</asp:TreeView>
<asp:SiteMapDataSource ID="dsSiteMap" Runat="server" ShowStartingNode="False" />
And in not overwritting this placeholder in nested page.
Add the menu to an ASCX page or its own masterpage and include it into the main masterpage. I myself have never run into this issue but something similar has happened.
if know your problem that
ASP.Net Menu Control renders incorrectly when used on a Master Page
if the asp.net menu is not worked then use usercontrol not master page because we can use user control by easy wasy.
In case anyone else runs into this problem again, I had my issue resolved over here on another Stack Overflow thread:
How to get rid of ugly asp:Menu flickering?
Same issue was with me too. But solved by removing jquery calls. :)
or you can download and keep the .js script file inside the script folder instead of referencing it from online.