ARTICLE

Multi Level ASP. NET Menu using jquery

Posted by Rohatash Kumar Articles | ASP.NET using VB.NET June 10, 2011
Here, we will see a multilevel menu using jquery and css in ASP. NET.
Download Files:
 
Reader Level:

Multi Levels Navigational Menu is a CSS/html list based menu with support for infinite levels of sub menus. In this menu sub menus are hidden once the mouse rolls out of them. Ability to specify two "arrow" graphics that will be automatically added to top menu items with a drop down, plus individual drop down items with additional levels, respectively.

The following are some easy steps.

Step-1:  Create a simple application in Visual Studio.

Step-2: Add the following JQuery and css file.

JQuery file

levelsmenu.js

Css file

menu1.css

menu2.css

menu3.css

These are included in the uploaded file.

Step-3:

First, add the following script code with style on the page in head section:

<link rel="stylesheet" type="text/css" href="Styles/Site.css" />

   <link rel="stylesheet" type="text/css" href="Styles/menu1.css" />

<link rel="stylesheet" type="text/css" href="Styles/menu2.css" />

<link rel="stylesheet" type="text/css" href="Styles/menu3.css" />

<script type="text/javascript" src="Scripts/levelsmenu.js">

</script>

 

Step-4:

Now add the following code to the body section which contains one image and some text.

<div class="title">

               <a runat="server" href="~/">

                   <img src="~/Image/MRF.jpg" runat="server" border="0"

                   style="height: 85px" />

               </a>

           </div>

   </div>

   <div>

     

   <div id="ddtopmenubar" class="mattblackmenu">

<ul>

<li><a href="webform2.aspx">Home</a></li>

<li><a href="" rel="ddsubmenu1">Photos</a></li>

<li><a href="" rel="ddsubmenu2">Videos</a></li>

<li><a href="">Forums</a></li>

<li><a href="" rel="ddsubmenu3">Jobs</a></li>

</ul>

</div>

<script type="text/javascript">

    ddlevelsmenu.setup("ddtopmenubar","topbar")//ddlevelsmenu.setup("mainmenuid", "topbar")

</script>

<ul id="ddsubmenu1" class="ddsubmenustyle">

<li><a href="#">photo1</a></li>

<li><a href="#">photo2</a></li>

<li><a href="#">photo3</a>

 <ul>

 <li><a href="#">Sub photo 3.1</a></li>

 <li><a href="#">Sub photo 3.2</a></li>

 <li><a href="#">Sub photo 3.3</a></li>

 <li><a href="#">Sub photo 3.4</a></li>

 </ul>

</li>

<li><a href="#">photo4</a></li>

<li><a href="#">photo5</a>

 <ul>

 <li><a href="#">Sub photo 5.1</a></li>

 <li><a href="#">Item photo 5.2</a>

   <ul>

   <li><a href="#">Sub photo 5.2.1</a></li>

   <li><a href="#">Sub photo 5.2.2</a></li>

   <li><a href="#">Sub photo 5.2.3</a></li>

   <li><a href="#">Sub photo 5.2.4</a></li>

   </ul>

 </li>

      </ul>

</li>

<li><a href="#">photo6</a></li>

</ul>

<!--Top Drop Down Menu 2 HTML-->

 

<ul id="ddsubmenu2" class="ddsubmenustyle">

<li><a href="#">video1</a></li>

<li><a href="#">video2</a></li>

<li><a href="#">video3</a>

 <ul>

 <li><a href="#">Sub videoitem 3.1</a></li>

 <li><a href="#">Sub videoitem 3.2</a></li>

 <li><a href="#">Sub videoitem 3.3</a></li>

 <li><a href="#">Sub videoitem 3.4</a></li>

 </ul>

</li>

<li><a href="#">video4</a></li>

<li><a href="#">video5</a>

 <ul>

 <li><a href="#">Sub videoItem 5.1</a></li>

 <li><a href="#">Sub videoItem 5.2</a>

   <ul>

   <li><a href="#">Sub videoItem 5.2.1</a></li>

   <li><a href="#">Sub videoItem 5.2.2</a></li>

   <li><a href="#">Sub videoItem 5.2.3</a></li>

   </ul>

 </li>

      </ul>

</li>

<li><a href="#">Vedio6</a></li>

</ul>

 

<!--Top Drop Down Menu 3 HTML-->

 

<ul id="ddsubmenu3" class="ddsubmenustyle">

<li><a href="">Job1</a></li>

<li><a href="">job2</a></li>

<li><a href="">job3</a></li>

<li><a href="">job4</a></li>

<li><a href="">job5</a></li>

</ul>

</div>

<table style = "width:100%;">

<tr>

</table>

 

 

Step-5

Now run the application and test it.

menu1.gif

Figure1

Now move mouse over the menu. all the sub menu will be display. This will looks like this.

menu2.gif

Figure2

Note: You can see a demo of this article by downloading this application.

Login to add your contents and source code to this article
share this article :
post comment
 
Become a Sponsor
PREMIUM SPONSORS
  • Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
    ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
Become a Sponsor