google

Dynamic Menu using HTML and CSS in ASP.Net

| Tuesday, March 25, 2014
In this article we will create nested dynamic menus and submenus using CSS and HTML which all browsers support.
  
Let's start by creating a website as:
  1. Start - All Programs - Microsoft Visual Studio
  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:

 <body bgcolor="#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;  
 }  

The output in the browser will be:

nestedmenu.jpg


0 comments:

Post a Comment

Next Prev
▲Top▲