How to create dropdown menu dynamically thorugh Jquery and ajax?

Hello,

Im trying to create a Dropdown menu in Jquery.

For this Im using the below reference.

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm#ajax

The menu would be based on the logged in user as to what he/she is allowed to see.

I have seen the example in the above link. It is totally clear to me if menus are static. But in my case the menu
would be dynamic based on logged in userId. They have used smoothmenu.htm file to bind

ddsmoothmenu.init({
mainmenuid: "smoothmenu-ajax",
//customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"]
contentsource: ["smoothcontainer", "smoothmenu.htm"] //"markup" or ["container_id", "path_to_menu_file"]
})

 But this is a static page where they have made the menu in ul and li. 

Now the issue which I have is how do I create the html in the ajax call?

http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.js

In the js they have this  code 

getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...")
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},

In the above code how do I create the html ie in ul and li dynamically.

view-source:http://www.dynamicdrive.com/dynamicindex1/smoothmenu.htm

The above link containes the static "Menus".

Can anyone please help me out how do I use it to create the menu's dynamically.

Thanks & Regards,

Sumit Arora

Two options:
1. Generate the ul/li (permission based) from server side call.  
2. Bring the JSON data from server side call and use any template engine (say jTemplates) to bind that data for your menu.

Thanks for the reply Raghav .

Raghav Khunger said:

Two options:
1. Generate the ul/li (permission based) from server side call.  
2. Bring the JSON data from server side call and use any template engine (say jTemplates) to bind that data for your menu.

By 1st point you mean to say I create the ul/li in StringBuilder and keep appending. Im getting all the menus from the DB. Now If I run for each loop and first check those which have ParentMenuID=0. 

Collection<Menus> menus= MenuBLL.BindMenus(int userID);
StringBuilder sb=new StringBuilder();
sb.Append("<ul>");
foreach(Menu menu in menus)
{
    sb.AppendFormat("<li><a href='{0}' title='{1}' >{2}   </a>",menu.URL,menu.Displayname,menu.Description);
   //Here Im checking if it has child menus
   if(menu.HasChild>0)
  {
       // Child can have further sub childs which can further sub childs. 
      // How do i check here till the sub sub sub childs?
       sb.Append("<ul>");
       //Rest of the strin builder code here 
   }
  else
  {
     //If there is no subchilds then directly closing li tag.
     sb.Append("</li>");

   }    


}
sb.Append("</ul>");

My concern is how Do I create (ul/li) it for child > sub childs > sub childs. Basically the below scenario.

<li><a href="#">Folder 2</a>

  <ul>

  <li><a href="#">Sub Item 2.1</a></li>

  <li><a href="#">Folder 2.1</a>

    <ul>

    <li><a href="#">Sub Item 2.1.1</a></li>

    <li><a href="#">Sub Item 2.1.2</a></li>

    <li><a href="#">Folder 3.1.1</a>

		<ul>

    		<li><a href="#">Sub Item 3.1.1.1</a></li>

    		<li><a href="#">Sub Item 3.1.1.2</a></li>

    		<li><a href="#">Sub Item 3.1.1.3</a></li>

    		<li><a href="#">Sub Item 3.1.1.4</a></li>

    		<li><a href="#">Sub Item 3.1.1.5</a></li>

		</ul>

    </li>

    <li><a href="#">Sub Item 2.1.4</a></li>

    </ul>

  </li>

  </ul>

</li>

Can you guide me on how to go about the above scenario.

Thanks & regards,

Sumit Arora

Sumit Arora said:

My concern is how Do I create (ul/li) it for child > sub childs > sub childs

No, only for one level. Do an ajax request further for sub levels.