The source files we are using to create the menu on this page:
JavaScript Source
CSS Source
As you learned on the first tutorial page, the WebDDM function accepts two parameters: 'container_id' and 'menu_data'.
You've already learned what 'container_id' is, now you'll learn what 'menu_data' is.

Menu data is an array that contains information that WebDDM will use to create your menu. Here is the basic structure of a menu array.

var menuArrayData = { // This marks the beginning of the array
	/*
	 * Base menu data
	 */

	// This is an array key (position) and its value (absolute).
	// This creates a menu that is absolutely positioned on the page.
	'position':'absolute',

	// This sets the TOP and LEFT position of the menu
	'top':0, // 0 pixels from the top of the menu's default position
	'left':25, // 25 pixels from the left of the menu's default position

	// Width and height of the base menu - ONLY AFFECTS RELATIVE MENUS.
	'width':500,
	'height':20,

	// This defines how the base menu expands. Possible values:
	// "auto" (automatically opens when the page loads)
	// "context(...)" (opens when the viewer right-clicks on the screen)
	// "none" (if you don't want it to open at all?..)
	'expand_menu':'auto',

	'items':{ // Begin array of items, LEVEL 1 ITEMS
		'top':0,
		'left':0,
		1:{ // Begin array of item 1
			// Item 1 attributes
			'content':'click me',
			'top':0, // Position from top of base menu
			'left':0, // Position from left of base menu
			'width':100, // Width in pixels of item
			'height':22, // Height in pixels of item
			// Other attributes ...
		}, // End array ot item 1
		2:{ // Begin array of item 2
			// Attributes ...
		}, // End array of item 2
		3:{ // Begin array of item 3
			// Attributes ...
		}, // End array of item 3
		4:{ // Begin array of item 4
			// Attributes ...
			'items':{ // Begin subitems of item 4, LEVEL 2 ITEMS
				'top':0,
				'left':0,
				// Items ...
			} // End subitems of item 4
		}, // End array of item 4
		5:{ // Begin array of item 5
			// Attributes ...
			'items':{ // Begin subitems of item 5, LEVEL 2 ITEMS
				'top':0,
				'left':0,
				1:{ // Begin array of item 5-1
					// Attributes ...
					'items':{ // Begin subitems of item 5-1, LEVEL 3 ITEMS
						'top':0,
						'left':0,
						// We could keep going! ...
					} // End subitems of item 5-1
				} // End item 5-1
			} // End subitems of item 5
		} // End array of item 5
	} // End array of items
}; // This is the end of the array
				

So, basically, we have three basic sections to this array: BASE, 'items', and ITEM.
BASE is at the very top of the menu array heirarchy. It defines attributes for the whole menu, including positioning, and how the menu is initially opened.
'items' contains multiple item arrays, and is defined by the 'items' key. An 'items' array can be either in the BASE array, or in an item array (see code above). The five 'items' attributes are:

• top - Offset from the topmost side of its parent item array.
• left - Offset from the leftmost side of its parent item array.
• X - where X is the number of an item, starting with 1.

ITEM: Multiple ITEM arrays can be held inside one 'items' array. Only one 'items' array may be held inside an ITEM array. An ITEM's array key is an integer, starting with 1, then 2, then 3, etc, and there is no upper limit - you can have unlimited items.
There are many ITEM attributes, and they will not all be listed here. These are just the basic attributes you will need to get started. To learn about more attributes, see the example pages.

• top - Offset from the top of its parent element, which will always be the items array that it is in.
• left - Offset from the left of its parent element.
• offsetTop - Offset from the top of the last item, if there is one, or the parent 'items' element.
• offsetLeft - Offset from the left of the last item, if there is one, or the parent 'items' element.
• width - Width of the item in pixels
• height - Height of the item in pixels
• content - HTML that will be placed inside the item.
• content_rollover - HTML that will be placed inside the item when the mouse is over the item.
• content_menuopen - HTML that will be placed inside the item when the item's subitems are visible.
• class - CSS class of the item.
• class_rollover - CSS class of the item when the mouse is over the item.
• class_menuopen - CSS class of the item when the item's subitems are visible.
• css - CSS of the item, in a "raw" format like "border-color:black;border-width:1px;". Using the css attribute is generally slower than using the class attribute, so use it sparingly.
• css_rollover - Self-explanatory.
• css_menuopen - Self-explanatory.

Please take the time now to study the CSS and JavaScript files that created the menu for this page. Experiment with attributes (and keep backups!) until you are comfortable working with them, and then continue to the next tutorial page.

Tutorials: Last - Next