CodeThatMenu Dynamic Menu Example

CodeThatMenu Dynamic Menu Example

<html><body bgcolor=white>
<script language="javascript1.2">
<!--

var MenuDef = {
	"style"	 : {
		"css"	 : "test1",
		"bgcolor" : "#CCCCCC",
		"size"	 : [100, 25],
		"shadow" : {
			"color" : "#AAAAAA", "width" : 5
		},
		"border" : {
			"color" : "black"
		},
		"fixheight" : 100,
		"align" : "center"
	},
	"itemover" : {
		"bgcolor" : "#EEEEEE", "css" : "test1"
	},
	"position" : {
		"absolute" : true, "pos" : [10, 10]
	},
	"separator" : {
		"style" : {
			"bgcolor" : "black", "size" : [100, 1]
		}
	},
	"items" : [
	{
		"text" : "Static",
		"menu" : {
			"position" : {
				"anchor_side" : "nw"
			},
			"items"	 : [
			{
				"text" : "Item 1 : 1", "action" : {
					"js" : "myfunc()"
				}
			},
			{
				"text" : "Item 1 : 2",
				"action" :
				{
					"url" : "http://yahoo.com", "target" : "_blank"
				},
				"style" : {
					"bgcolor" : "lightblue"
				},
				"menu" : {
					"items" : [
					{
						"text" : "Item 1 : 2 : 1"
					},
					{
						"text" : "Item 1 : 2 : 2"
					} ],
					"position" : {
						"anchor" : "w", "anchor_side" : "e"
					}
				}
			} ]
		}
	},
	{
		"text" : "Item 2"
	},
	{
		"type" : "separator"
	},
	{
		"text" : "Item 3",
		"menu" : {
			"position" : {
				"anchor_side" : "nw"
			},
			"style" : {
				"direction" : "h", "bgimg" : "img/grass.gif"
			},
			"separator" : {
				"style" : {
					"bgcolor" : "black", "size" : [1, 25]
				}
			},
			"items"	 : [
			{
				"text" : "Item 3 : 1",
				"action" : {
					"url" : "http://ya.ru", "target" : "_blank"
				}
			},
			{
				"text" : "Item 3 : 2",
				"action" : {
					"url" : "http://google.com"
				}
			},
			{
				"type" : "separator"
			},
			{
				"text" : "Item 3 : 3",
				"menu" : {
					"position" : {
						"anchor" : "sw"
					},
					"items" : [
					{
						"text" : "Item 3 : 3 : 1"
					},
					{
						"text" : "Item 3 : 3 : 2"
					} ]
				}
			} ]
		}
	} ]
};
var DefMenu = new CMenu(MenuDef, 'DefMenu');

//create main menu
var MainMenu = new CMenu(null, 'MainMenu');

//retrieve the menu interface reference
var menu = MainMenu.obj();

//menu positioning
menu.Pos('pos', [150, 10]);

//menu style settings
menu.St('css', 'test1');
menu.St('bgcolor', '#CCCCCC');
menu.St('size', [100, 25]);
menu.St('align', 'center');
menu.St('shadow', {
	"color" : "#AAAAAA", "width" : 5
} );
menu.St('border', {
	"color" : "black", "width" : 1
} );
menu.StOver('bgcolor', '#EEEEEE');
menu.StOver('css', 'test1');

//menu separator
menu.Separator( {
	"style" : {
		"bgcolor" : "black", "size" : [100, 1]
	}
} );

//1st item
var item = menu.addItem();
item.setText('Dynamic');

//create a submenu with some object definition
var submenu = item.addPopup( {
	"position" : {
		"anchor_side" : "nw"
	}
} );

//add an item with object definition
submenu.addItem({
	"text" : "Item 1 : 1", "action" : {
		"js" : "myfunc()"
	}
} );

//another item
item = submenu.addItem();
item.setText("Item 1 : 2");

//set item action and style
item.Act('url', 'http://yahoo.com');
item.Act('target', '_blank');
item.St('bgcolor', 'lightblue');

//add a submenu to this item
var subsubmenu = item.addPopup();

//create items
subsubmenu.addItem( {
	'text' : 'Item 1 : 2 : 1'
} );
subsubmenu.addItem( {
	'text' : 'Item 1 : 2 : 2'
} );
subsubmenu.Pos('anchor', 'w');
subsubmenu.Pos('anchor_side', 'e');

//add 2nd item to the main menu
menu.addItem( {
	"text" : "Item 2"
} );

//add 3rd item to the menu, get the reference
item = menu.addItem();

//this item will be the separator
item.Type('separator');

//add 4th item
item = menu.addItem( {
	"text" : "Item 3"
} );

//create a submenu with full object definition
item.addPopup( {
	"position" : {
		"anchor_side" : "nw"
	},
	"style" : {
		"direction" : "h", "bgimg" : "img/grass.gif"
	},
	"separator" : {
		"style" : {
			"bgcolor" : "black", "size" : [1, 25]
		}
	},
	"items"	 : [
	{
		"text" : "Item 3 : 1", "action" : {
			"url" : "http://ya.ru", "target" : "_blank"
		}
	},
	{
		"text" : "Item 3 : 2", "action" : {
			"url" : "http://google.com"
		}
	},
	{
		"type" : "separator"
	},
	{
		"text" : "Item 3 : 3",
		"menu" : {
			"position" : {
				"anchor" : "sw"
			},
			"items" : [ {
				"text" : "Item 3 : 3 : 1"
			}, {
				"text" : "Item 3 : 3 : 2"
			} ]
		}
	} ]
} );

//ready

//-->
</script>

</head>
<body>

<script language="javascript1.2">
<!--

MainMenu.create();
DefMenu.create();

DefMenu.run();
MainMenu.run();

//-->
</script>

</body>
</html>