ITTreats.com

A Simple way to acheive multi level navigation menu using  the very popular  Javascript, you are correct JQUERY.  DynamicDrive.com  is providing  a awesome and simple solution to attain this functionality  with a simple  change in your  code,  Just  adding  the Class parameter to the div,  Smooth Navigation Menu

What You Need to  do in your website?

1.You need to  Download  and point  it  to the  desired  location in your Script and also latest Jquery File.

2. The Download files  are   one JS, one  CSS  which  we can  customize as per our requirement ( Color Combi) , two Arrow images  which  adds  the effect of   presence of Multi level   menu.

3. Thats’it  RUN IT

How to do it ?

Step 1 : Download latest version of jquery or use the CDN url and place the following line of code in your web page Head section

We can use CDN  for the latest version of jquery

1

<script scr="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Step 2 : Download files from dynamicdrive JS and css files

• ddsmoothmenu.js
• ddsmoothmenu.css
• ddsmoothmenu-v.css
• 2 images:
  ( You can use your own image files instead of these)

Step 3 : Refer the Files in your web page

Place the following code in your web page head section

1
2
3
4

 
<link rel="stylesheet" type="text/css" href="path/to /ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="path/to/ddsmoothmenu-v.css" />
<script type="text/javascript" src="path/to /ddsmoothmenu.js">

Step 4 : Configure your Menu

Your Menu that is Multi level ul should be with in a div which acts as a place holder or container

here is a small example structure it should be like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

 
<div id="menu" class="ddsmoothmenu">
<ul>
<li> Nav 1 </li>
 
<li> Nav2 
       <ul>
            <li> Nav2 - sub Nav 1 </li>
            <li> Nav2 - sub Nav 2 </li>
            <li> Nav2 - sub Nav 3 </li>
</ul>
</li>
 
<li> Nav3 
       <ul>
            <li> Nav3 - sub Nav 1 </li>
            <li> Nav3- sub Nav 2 </li>
            <li> Nav3- sub Nav 3 
                <ul>
            <li> Nav2 - sub Nav 1 </li>
            <li> Nav2 - sub Nav 2 </li>
            <li> Nav2 - sub Nav 3 </li>
                </ul>
 
</li>
</ul>
</li>
 
 
 
</div>

In above example, our Actual Menu is embed with in a div with id as menu and class as ddsmoothmenu which is a must thing to do

Step 5 : Adding the JS which activates the Menu funtionality

Once we are Done with adding the required dependency files as well as structuring the menu, the last section need to call the JS function to initiate the functionality

Here is how we can do it, Just add the following code into bottom of head section

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<script type="text/javascript">
//  This  example  presumes   your  Menu  Div  id="menu"  class ="ddsmoothmenu"
 
ddsmoothmenu.init({
 mainmenuid: "menu", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
}) 
 
</script>

Step 7 : Simply Add the relative path to the Arrow images

Last thing we need to do is, Give away the relative path to the images, The above example presumes that All the Required css, js files and images are in the same folder. If not give the relative path to the images( down.gif, right.gif)

Also we can configure few more things very simply, Just have a look at the following code( You can find these lines of code in ddsmoothmenu.js file

1
2
3
4
5

 
arrowimages: {down:['downarrowclass', 'http://www.cssdrive.com/lib/down.gif', 23], right:['rightarrowclass', 'right.gif']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enable:true, offsetx:5, offsety:5}, //enable shadow?
showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

The above code tells you that, we can configure arrow images, transition effect, Shadow and Hiding delay after menu mouseout ..

Step 8 : Run the web page and Do the little CSS work if you want to change look and feel for your Multi Level Navigation Menu

If you experience difficulties, just add a comment to the article, we will try to help you out.

Hope You like your Multi level Navigation menu. Once again Thanks to Dynamic Drive for this easy to use Multi Level Navigation menu.

Written by adrevol

{adrevol has written 91 posts on ITTreats.com . See all posts by adrevol}