Dynamic Display Menu Using HTML List Tag and CSS in ASP.Net

Vithal Wadje

13y98.4k10100Article

Dynamic MenuCSS in Asp.netDynamic nested submenu

10 Comments

Join the conversation! Your thoughts help the community grow.

Vithal Wadje13y ago
thanks Raj sir
Rati Raj13y ago
Thanks for such a quick solution.....
Vithal Wadje13y ago
thank you johnnymward,its my pleasure
Former member13y ago
Thank you very much dude
Vithal Wadje14y ago
thank you pankaj
Pankaj Tiwari14y agoedited
Good.. Please refer this link for more details .. http://pankajtiwarii.blogspot.in/
Vithal Wadje14y ago
thanks a lot Rohatash Kumar sir,i cant belive that you have read my article.. just sir i am inspired from all of you who gives the great contribution not only to C#-corner but also all new comers who struglling to settle life by getting job. again thanks
Rohatash Kumar14y ago
Nice article.Vithal.. I have also bookmarked this article for future use.
Vithal Wadje14y ago
its my pleasure Anil Saxena sir,thanks you
Anil Saxena14y ago
This article helps me to create menu without any code of JavaScript..

Background

In web sites there is a need to use many submenus under the Main menus due to vast categories of content, so by considering this requirement I have written this article to demonstrate how to create nested dynamic submenus using CSS which all browsers support.

Let's start by creating a website as:

Start - All Programs - Microsoft Visual Studio 2010
File - New Website - C# - Empty website (to avoid adding a master page)
Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
Then right-click on Solution Explorer - Add New Item - Default.aspx page

Open the source view and use the list tag to create the Menu and Submenu. The source code <body> tag should be as in the following:

<bodybgcolor="#c0c0c0">

<ulid="Ul1"> // for horizontal Main Menu Tab

<li><ahref="#" title ="Homepage" class="selected">About Us</a ></li >

<li ><a href ="#" title ="About us">Authors</ a ></li > //for submenu

<li ><a href ="#" title ="Projects">Articles</a >

<ul>

<li ><a href ="#" title="Older projects">Older Articles</a > //for submenu

<ul>

<li> <a href ="#" title ="">ASP.Net </ a ></ li >// for Nested subemenu and <a> tag is used to URL address

<li> <a href ="#" title ="">Silverlight</a ></ li >

</ ul >

</ li >

<li> <a href ="#" title ="Active projects">New Articles</a > //for submenu

<ul>

<li> <a href ="" title ="Excel FIle">File Upload</a ></ li > // for Nested subemenu

<li> <a href ="" title ="ConvertNoToString">Convert Number</a ></li >

<li> <a href ="" title ="Stored Procedure">Stored Procedure</a ></ li >

</ ul >

</ li >

</ ul >

</ li >

<li> <a href ="#" title ="Contact">Contact Us</a ></ li >

</ul >

</form>

</body>

In the above source code the <li> tag is used to create a horizontal Main Menu and the <ul> list tag is used to create the submenu, again under the <ul> used and another <ul> tag to create a nested submenu.

Applying effects to the Menu using CSS

To apply the effects to the menu use the following CSS classes:

#menu, #menu ul /*for main menu *\

{

list-style:none;

padding:0;

margin:0;

}

/* SHOW SUBMENU 1 */

#menu li:hover ul, #menu li.over ul

{

display:block;

}

#menu li:hover ul ul, #menu li.over ul ul

{

display:none;

}

/* SHOW SUBMENU 2 */

#menu ul li:hover ul, #menu ul li.over ul

{

display:block;

}

/* for mouse hover */

#menu a:hover

{

background-color:#5798B4;

color:#fff;

}

Now run the application which looks such as in the following image:

Advantages

There is no use of JavaScript code.
Supported by all browsers.

Note

In the above source code the <a> tag is used to navigate the menu by specifying the URL address into the href property, so I hope that you have specified the URL. For more source code download the zip file of the sample application.