ARTICLE

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

Posted by Vithal Wadje Articles | ASP.NET Programming October 30, 2012
In this article I have explained how to create a dynamic nested submenu using CSS.
Reader Level:
Download Files:
 

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:
  1. Start - All Programs - Microsoft Visual Studio 2010 
  2. File - New Website - C# - Empty website (to avoid adding a master page)
  3. Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
  4. 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">
    <form id="form2" runat="server">
   <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 pass URL address
<li> <a  href ="#"  title ="">Silverlight</a ></ li >
<li> <a  href ="#"  title ="">Ajax</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:
 
nestedmenu.jpg
 
Advantages
  1. There is no use of  JavaScript code.
  2. 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.

COMMENT USING