There are many ways to create menu dynamically:
1. Split url by "/", then create menu for each part.
You can search the solution from internet, there are many articles for reference.
2. Create menu manually.
<script type="text/javascript">
var TmsMenu = function() {
var menuMap = {};
var menu = [];
var container;
var init = function(id) {
container = document.getElementById(id);
}
init.prototype = {
addMenu: function(menuItem) {
if (typeof menuMap[menuItem.module] == 'undefined') {
menu = [];
} else {
menu = menuMap[menuItem.module];
}
var len = menu.length;
var newMenu = [];
for (var i=0; i<len; i++) {
if (parseInt(menu[i].level) < parseInt(menuItem.level)) {
newMenu.push(menu[i]);
}
};
newMenu.push(menuItem);
menuMap[menuItem.module] = newMenu;
},
drawMenu: function(module) {
var str = 'Home';
if (typeof menuMap[module] == 'undefined') {
menu = [];
} else {
menu = menuMap[module];
}
var len = menu.length;
for (var i=0; i<len; i++) {
if (i == len - 1) {
str += ' > ' + menu[i].name;
} else {
str += ' > <a href="' + menu[i].url + '">' + menu[i].name + '</a>';
}
}
container.innerHTML = str;
},
debug: function(obj, message) {
var s = '';
if (typeof message != 'undefined') {
s += message + '\n------------------------------------------------\n';
}
for (var item in obj) {
s += 'obj[' + item + '] = ' + obj[item] + '\n';
}
alert(s);
}
}
return init;
}();
var menu;
window.onload = function() {
menu = new TmsMenu('menuContainer');
menu.drawMenu('');
}
function showCarrierMenu() {
menu.addMenu({module:'Carrier', name: 'Carrier Management', level: 0, url: '#'});
menu.drawMenu('Carrier');
}
function showAddCarrierMenu() {
menu.addMenu({module:'Carrier', name: 'Carrier Management', level: 0, url: '#'});
menu.addMenu({module:'Carrier', name: 'New Carrier', level: 1, url: '#'});
menu.drawMenu('Carrier');
}
function showDeleteCarrierMenu() {
menu.addMenu({module:'Carrier', name: 'Carrier Management', level: 0, url: '#'});
menu.addMenu({module:'Carrier', name: 'Delete Carrier', level: 1, url: '#'});
menu.drawMenu('Carrier');
}
function showNodeLinkMenu() {
menu.addMenu({module:'NodeLink', name: 'Node Link Management', level: 0, url: '#'});
menu.drawMenu('NodeLink');
}
function showNodeLinkDetailMenu() {
menu.addMenu({module:'NodeLink', name: 'Node Link Management', level: 0, url: '#'});
menu.addMenu({module:'NodeLink', name: 'Node Link Detail', level: 1, url: '#'});
menu.drawMenu('NodeLink');
}
function showDeleteNodeLinkMenu() {
menu.addMenu({module:'NodeLink', name: 'Node Link Management', level: 0, url: '#'});
menu.addMenu({module:'NodeLink', name: 'Delete Node Link', level: 1, url: '#'});
menu.drawMenu('NodeLink');
}
</script>
<div id="menuContainer" style="margin: 10px 20px; padding:6px; width:800px; border:1px solid #666;"></div>
<div id="menuContainer" style="margin: 10px 20px; padding:6px; width:800px; border:1px solid #666;">
<b>Menu</b>
<ul>
<li>
<a href="javascript:void(0);" οnclick="showCarrierMenu();">Carrier Management</a>
<ul>
<li><a href="javascript:void(0);" οnclick="showAddCarrierMenu();">Add Carrier</a></li>
<li><a href="javascript:void(0);" οnclick="showDeleteCarrierMenu();">Delete Carrier</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);" οnclick="showNodeLinkMenu();">Node Link Management</a>
<ul>
<li><a href="javascript:void(0);" οnclick="showNodeLinkDetailMenu();">Node Link Detail</a></li>
<li><a href="javascript:void(0);" οnclick="showDeleteNodeLinkMenu();">Delete Node Link</a></li>
</ul>
</li>
</ul>
</div>
Result: