ARTICLE

Multi Level ASP. NET Menu using jquery

Posted by Rohatash Kumar in Articles | ASP.NET using VB.NET on June 10, 2011

Tags: asp.net, asp.net articles, asp.net tutorials, multilevelmenu in asp.net, all level menu in asp.net, multilevel menu using jquery and css/html

Here, we will see a multilevel menu using jquery and css in ASP. NET.

Tweet
2351
0

Download Files:

Multimenu.zip

Reader Level: Beginner

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:

</script>

Step-4:

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

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

style="height: 85px" />

</a>

</div>

<div>

<ul>

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

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

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

</ul>

</div>

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

</script>

<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>

<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>

</ul>

</div>

<tr>

</table>

Step-5

Now run the application and test it.

Figure1

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

Figure2

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

post comment

TOP LEADERS

View All

TRENDING UP

Use of Excel.AddUnique Method in MS Excel to Display Unique Numbers in Ranges Use of PPT.ApplyTheme.BackgroundStyle in MS PowerPoint 2010 to Apply Themes & Backgrounds Use of PPT.InteractWithChartLocation in MS PowerPoint 2010 to Change Chart Locations Simple Web Report With Pivot Table and Linq to Entity Print A Chart into a Byte Stream Using New Audio Player Class With VB.NET Display Top Ten Percent Item and bottom Ten percent Item Use of PPT.ConvertTextToSmartArt in MS PowerPoint 2010 to Convert Text into SmartArt How to Find Backup Folder Data Location Using GetSpecialLocation in MS OneNote 2010 Calendar Control In WPF

View All

Multi Level ASP. NET Menu using jquery

Related Articles