Today, i’ve learn how to Create Dynamic Navigation Menu using Javascript. In this post, i will focus on client side implementation therefore i use json for data format. My main idea is: i will save the menu data on database and when the user do log in, i will retrieve the menu data (based on on user role) and create the json format from these menu datas, then save it on the session.

By saving menu datas on json format and save it in session, i can optimize on fetching menu datas every loading new page.
First, we have to define the json menus data structure, so we can Create Dynamic Navigation Menu using Javascript.

in this tutorial, the menu object will have following properties: id, name, url, and parent. the parent properties will referred to the parent id. For the example, you can take a look on my dummy data below. Root menu is menu with parent = “0”, for example Parent 1 is the Root menu, and have two child named Child Parent 1.1 and Child Parent 1.2

[js]
var menus = [
{
“id”: “1”,
“name”: “Parent 1”,
“url”: “”,
“parent”:”0″
},
{
“id”: “2”,
“name”: “Child Parent 1.1”,
“url”: “#”,
“parent”:”1″
},
{
“id”: “3”,
“name”: “Parent 2”,
“url”: “”,
“parent”:”0″
},
{
“id”: “4”,
“name”: “Child Parent 2.1”,
“url”: “”,
“parent”:”3″
},
{
“id”: “5”,
“name”: “Child Parent 2.1.1”,
“url”: “”,
“parent”:”4″
},
{
“id”: “6”,
“name”: “Child Parent 2.1.1.1”,
“url”: “#”,
“parent”:”5″
},
{
“id”: “7”,
“name”: “Child Parent 2.2”,
“url”: “”,
“parent”:”3″
},
{
“id”: “8”,
“name”: “Child Parent 2.1.1.2”,
“url”: “#”,
“parent”:”5″
},
{
“id”: “9”,
“name”: “Child Parent 2.1.2”,
“url”: “#”,
“parent”:”4″
},
{
“id”: “10”,
“name”: “Child Parent 1.2”,
“url”: “#”,
“parent”:”1″
}
]
[/js]

Then, i will create function for build the navigation menu. I divide into three function: buildMenu, buildChildMenu, and isHaveChild function.

• buildMenu: the main function that will separate the root menu, and child menus and start build menu by calling buildChildMenu.
• buildChildMenu: function for build the dynamic menu based on menu’s structure data recursively.
• isHaveChild: is a util function for detect is current menu’s object have child menu.

The following function is buildMenu

[js]
function buildMenu(menus){
var rootMenu = [];
var childMenu = [];
var rootIndex = 0;
var childIndex = 0;
for(i=0; i“+child.name;
generatedMenu = buildChildMenu(child, childMenu, generatedMenu)+”

“;
}else{
generatedMenu = generatedMenu+”

“;
}
}
}
if(parentMenu.parent == “0”){
generatedMenu = generatedMenu + “

“;
}else{
generatedMenu = generatedMenu + “

“;
}
return generatedMenu;
}

[/js]

The Last function is isHaveChild. will return true if current menu have child.

[js]
function isHaveChild(parentId, childMenu){
for(var k=0; k Bellow is sniped code for calling these function. i use html() jquery function, generated html format menu structure will apply inside nav tag.

[js]
var menu = buildMenu(menus);
$(‘nav’).html(menu);

[/js]
These all tutorial for Create Dynamic Navigation Menu using Javascript, hope this will help you. any feedback will appreciated. 😀
you can see on the demo here.