MENU

Dynamically Display Menu Using HTML List Tag And CSS without JavaScript

Filed Under: , , on
Due to the vast categories of content on websites, there is a need to use many sub menus under the main menus. So, by considering this requirement, I have written this article to demonstrate how to create nested dynamic sub menus 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 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 whole code will be look like as follows
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
/* created by vithal wadje for C# corner contribution */
#menu, #menu ul
 {
    list-style:none;
    padding:0;
    margin:0;
}
#menu li
 {
    float:left;
    position:relative;
    line-height: 4.5em;
    width: 10em;
}
#menu li ul
 {
    position:absolute;
    margin-top:-1em;
    margin-left:.5em;
    display:none;
}
#menu ul li ul 
{
    margin-top:-3em;
    margin-left:8em;
}
#menu a 
{
    display:block;
    border-right:1px solid #fff;
    background:#E0F574;
    color:#3B3B3B;
    text-decoration:none;
    padding:0 10px;
}
#menu a:hover 
{
    background-color:#5798B4;
    color:#fff;
}
#menu ul
 {
    border-top:1px solid #fff;
}
#menu ul a
 {
    border-right:none;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #fff;
    background:#AEC245;
}
/* 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;
}
</style>
        <title></title>
</head>
<body bgcolor="#c0c0c0">
        <form id="form1" runat="server">
        <ul id="menu">
        <li><a href="#" title="Homepage" class="selected">About Us</a></li>
        <li><a href="#" title="About us">Authors</a></li>
        <li><a href="#" title="Projects">Articles</a>
        <ul>
        <li><a href="#" title="Older projects">Older Articles</a>
        <ul>
        <li><a href="#" title="">Asp.net  </a></li>
        <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>
        <ul>
        <li><a href="http://www.c-sharpcorner.com/UploadFile/0c1bb2/uploading-and-downloading-excel-files-from-database-using-as/" title="Excel FIle">File Upload</a></li>
        <li><a href="http://www.c-sharpcorner.com/UploadFile/0c1bb2/converting-a-number-to-string-in-Asp-Net-and-C-Sharp/" title="ConvertNoToString">Convert Number</a></li>
        <li><a href="http://www.c-sharpcorner.com/UploadFile/0c1bb2/insertselectupdate-delete-records-in-single-stored-proce/" title="Stored Procedure">Stored Procedure</a></li>
        </ul>
        </li>
        </ul>
        </li>
        <li><a href="#" title="Contact">Contact Us</a></li>
</ul>
        </form>
</body>
</html>
Now run the application which looks such as in the following image:

nestedmenu.jpg

Note

In the above source code, the <a> tag is used to navigate the menu by specifying the URL address in the href property, so I hope that you have specified the URL.

Post a Comment

www.CodeNirvana.in

Protected by Copyscape
Copyright © Compilemode