Multi Level ASP. NET Menu VB.NET

Here, we will see a multilevel menu using jquery and css in ASP. NET.
  • 3915
Download Files:
 

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.

Categories

More Articles

© 2013 dotNetheaven. All rights reserved.