Tutorials
Tutorials - 4 - Multiple Menus
Most menu software has a complex system for multiple menus on one page... or, even worse, no way to do it at all!
During the design process of WebDDM, the ability to have multiple menus on one page was one of the main goals. The goal was met, and it's very easy to put 2, 3, or even 1000 menus on one page.
1. Introduction
As you learned on the first tutorial, the WebDDM() function takes two parameters - the menu div container ID, and the menu data. The first parameter is what's important here.
For all the menus this far, you have simply used "menu" as the menu ID. Well, you can use that ID... but then you can also use "menu2", "menu3", "menu4", etc, or more descriptive IDs like "books_menu" and "product_list".
2. Code
					JavaScript File
// Initialize WebDDM
// This will initialize two menus
function initWebDDM ()
{
	// First menu
	var menu_data = { ... };
	var booksMenu = new WebDDM('books_menu', menu_data);
	
	// Second menu
	var menu_data = { ... };
	var menuOfProducts = new WebDDM('products_menu', menu_data);
}

// This function will initialize a third menu
function initAnotherWebDDM ()
{
	var menu_data = { ... };
	var navMenu = new WebDDM('navigation_menu', menu_data);
}
				
					HTML File		
<html>
	<head>
		<!-- Include JavaScript files for WebDDM and other scripts here ... -->
	</head>
	<body onload="initWebDDM(); initAnotherWebDDM();">
		<!-- Menu containers -->
		<div id="books_menu"></div>
		<div id="products_menu"></div>
		<div id="navigation_menu"></div>
		
		<!-- Rest of the document ... -->
	</body>
</html>
Yep. It's that simple.
Tutorials
Tutorials: Last - Next