Join Dotnetcodes DotnetCodes.com is online Discussion Forum for Software professionals . It lets you find friends around the world and Create professional network that share similar interests as you. Get help on ur projects by industry specialists. Also get answers to all ur technical/placement related querries.Get an edge over others.
Already MemberClick here to login
ASP.net MVC Interview Questions Answers Interview Questions
Serial Number in SSRS Articles
How to Print a Crystal Report direct to printer Articles
Get Started Developing for Android Apps with Eclipse Articles
Razor View Engine Interview Questions Answers Interview Questions
.Net framework 4.0 Interview Questions Answers Interview Questions
SQL server reporting services Interview Questions (SSRS) part 1 Articles
Whats New in ASP.NET 4.0 Part 2 Articles
Difference between Encapsulation and Abstraction Interview Questions
Explaining SDLC -System Development Life Cycle Articles
SPIRE PDF Library Articles
Infosys Interview Questions Interview Questions
Html5 interview questions and answers Interview Questions
Dynamic Menu using HTML List Tag and CSS in ASP.Net Articles
SharePoint 2010 interview Questions Answers Interview Questions
Submit Articles | More Articles..

Dynamic Menu using HTML List Tag and CSS in ASP.Net

Posted By: rakesh On:11/18/2012 9:14:12 AM in:Articles Category:ASP.NET Hits:9908
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.

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
 
comments powered by Disqus
User Profile
Rakesh Sinha
Sr. Technical Lead
New Delhi , India
Email :You must Log In to access the contact details.
Latest Post from :rakesh
Hacked By 4xroix
View: 34 | Submitted on: 5/28/2019 9:07:35 PM
Which party you want to vote in Loksabha elections 2019?
View: 792 | Submitted on: 10/12/2018 5:59:06 PM
Response.Redirect vs Server.Transfer
View: 507 | Submitted on: 12/27/2015 2:26:38 PM
The test form is only available for requests from the local machine.
View: 745 | Submitted on: 11/3/2015 9:54:36 PM
Difference between web service WCF and Web API
View: 7957 | Submitted on: 10/28/2015 9:23:51 PM
Submit Articles | All Post of This User..


Advertise About Us Private Policy Terms of use
All rights reserved to dotnetcodes. Logos, company names used here if any are only for reference purposes and they may be respective owner's right or trademarks.
Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 or Google Crome and higher