Remove default hovering effect from ASP.NET menu

0
votes

I want to remove default hovering effect from asp.net menu and i want to show the child items when parent item is clicked.

I'm using built-in asp.net menu. I'm binding the menu items from a sitemap datasource.

<div class="span2 menu-bar">
                                <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" EnableViewState="false" IncludeStyleBlock="false" 
                                    StaticDisplayLevels="2"  Orientation="Horizontal"  CssClass="row-fluid" DynamicHorizontalOffset="-2" RenderingMode="List">
                                </asp:Menu>
                                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
                            </div>

Please do help me.

Thanks in advance

1
jqueryasp.netcss
what solutions have you tried? kindly explain your problem with little more explanation is that asp.net menu is css based? or built in asp.net menu? - maverickosama92
forums.asp.net/t/1829903.aspx/… - Falguni Panchal

1 Answers

0
votes

On page load (or on ready), write following line: $('#Menu1').find('ul .level2').css('display','none');

Once you do that, it'll stop the hovering effect of that menu. But once you do that, then you would only be able to open the submenu by making it display block, so for that I wrote following lines, onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');