Create menu by javascript dynamically

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: