Often in web applications, there is a need to dynamically display or hide objects based on certain events triggered by the web user. One such example is a dynamic navigation bar where a sub navigation is to be turned on/off. In this recipe, we will see how to achieve this using jQuery.
Add a new web form
Recipe7.aspx
to the current project.Create a couple of main menu and sub-menu items in a vertical navigation bar using ASP.NET panel controls as shown in the following example:
<asp:Panel class="content_head" runat="server">Menu Item 1</asp:Panel> <asp:Panel class="content_body" runat="server">Sub Menu Item 11 <br />Sub Menu Item 12</asp:Panel>
Define the css style of the main menu item as follows:
.content_head { width:150px; height:30px; background-color:#CCCCCC; cursor:pointer; }
Define the css style of the sub-menu item as follows:
.content_body { display:none; ...