Skip Navigation LinksHome > Categories > Code from a Category

ASP.NET-How to Show The Second Level Of Menu Items


User Name: codelecturer
Name: Mike Chauhan
Contact Me: www.datawebcoder.com/ContactUs.aspx
Home Page: www.datawebcoder.com
6 years of total IT experience including programming, application development, System Maintenance . 3 years of Experienced and expertise in .Net Framework VB, Visual Basic.Net, ASP.Net 2.0, 3.5 and AD... [More]
Viewed Times: 320
Add Date: 11/19/2011
The menu shows the sub-menu when the user hovers the mouse over the root level menu items. This can get annoying especially if you accidentally pass the mouse over the menu when trying to click something inside the page.
This can be really frustrating from a usability point of view especially when developing Web Applications (not just websites).

So, the following javascript will override the default behavior of the menu and show the second level of menu items only when the user clicks on the first (root) level menu items.

Cleint side script


Also to call the function, add the following in the overriden OnPrerender method:


The above code takes care of more than just adding click behavior to the menu. It also makes sure that styling remains intact (for example when the mouse is above the menu item it changes color, depending on how you style the menu).

Now as for where to place this javascript, I recommend a common place where it will be used across all pages, also adding them to a js file and referencing it would be fine. For example, if you have a User Control called "Top_Section.ascx", and that control has the menu inside it, then add the javascript to the top of that file before the menu.

Post a Comment
Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Details**:
Enter Text
as Below: 		(case insensitive, if hard to read, click the "get a new one" button)
 
    
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.