Reader Level:
Articles

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

By Vithal Wadje on October 30, 2012
In this article I have explained how to create a dynamic nested submenu using CSS.
  • 2
  • 0
  • 28755
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.

Vithal Wadje

Vithal Wadje Currently working as Senior Software Engineer on Microsoft Technologies with BFSI Domain at one of the top MNCs in Mumbai.  He has experience in handling large financial projects involved Microsoft te... Read more

COMMENT USING

Trending up