CodeThatMenu Custom Borders Example

CodeThatMenu Custom Borders Example

var MenuDef = {
	"style"	 : {
		"css" : "xp",
		"box"	 : true,
		"size"	 : [250, 20],
		"bgcolor" : "#FCFCF9",
		"direction" : "v",
		"border" : {
			"color" : "#000000", "size" : 1,
			"t" : {
				size : 275,
				offset : - 2,
				width : 1,
				color : 'red'
			},
			"b" : {
				size : 275,
				offset : - 2,
				width : 1,
				color : 'brown'
			},
			"l" : {
				size : 107,
				offset : - 2,
				width : 1,
				color : 'olive'
			},
			"r" : {
				size : 107,
				offset : - 2,
				width : 1,
				color : 'purple'
			}
		},
		"shadow" : {
			"color" : "#c0c0c0", "size" : 2
		},
		"imgendon" : {
			"src" : "themes/gray/themes_img/arr_on.gif",
			"width" : 5, "height" : 10
		},
		"imgendoff" : {
			"src" : "themes/gray/themes_img/arr_off.gif",
			"width" : 5, "height" : 10
		},
		"imgspace" : 5,
		"bar" : {
			"bgcolor" : "#EFEDDE", "size" : [20, 100]
		}
	},
	"itemover" : {
		"css" : "xp", "bgcolor" : "#C1D2EE", "color" : "#000000"
	},
	"separator" : {
		"style" : {
			"bgcolor" : "#EFEDDE",
			"size" : [250, 2], "imgitem" : ""
		}
	},
	"position" : {
		"absolute" : false, "pos" : [30, 20]
	},
	"defaction" : {
		"title" : "This is an action title"
	},
	"items" : [
	{
		"text" : "Home",
		"style" : {
			"imgitem" : {
				"src" : "themes/gray/themes_img/home.gif",
				"width" : 16, "height" : 16
			},
			"imgdir" : {
				"src" : "themes/gray/themes_img/home.gif",
				"width" : 16, "height" : 16
			}
		}
	},
	{
		"text" : "News",
		"style" : {
			"imgitem" : {
				"src" : "themes/gray/themes_img/news.gif",
				"width" : 16, "height" : 16
			},
			"imgdir" : {
				"src" : "themes/gray/themes_img/news.gif",
				"width" : 16, "height" : 16
			}
		},
		"menu" : {
			"style" : {
				"imgitem" : {
					"src" : "themes/gray/themes_img/date.gif",
					"width" : 16, "height" : 16
				},
				"size" : [150, 20],
				"shadow" : { },
				border : {
					width : 9,
					t : {
						offset : - 9,
						size : 59,
						el : [
						{
							src : "img/cross.gif", width : 9
						},
						{
							src : "img/horline.gif", width : 50
						} ]
					},
					b : {
						offset : - 9,
						el : [
						{ }, //transparent cell with undefined length
						{
							src : "img/horline.gif", width : 50
						},
						{
							src : "img/cross.gif", width : 9
						} ]
					},
					l : {
						size : 50,
						el : [
						{
							src : "img/vertline.gif", width : 50
						} ]
					},
					r : {
						el : [
						{ },
						{
							src : "img/vertline.gif", width : 50
						} ]
					}
				}
			},
			"position" : {
				"anchor" : "ne",
				"anchor_side" : "nw"
			},
			"items"	 : [
			{
				"text" : "23-06-2003"
			},
			{
				"text" : "25-06-2003"
			},
			{
				"text" : "26-06-2003"
			},
			{
				"text" : "30-06-2003"
			} ]
		}
	},
	{
		"type" : "separator"
	},
	{
		"text" : "About a company",
		"style" : {
			"imgitem" : {
				"src" : "themes/gray/themes_img/about.gif",
				"width" : 16, "height" : 16
			}
		}
	},
	{
		"text" : "Our Forum",
		"style" : {
			"imgitem" : {
				"src" : "themes/gray/themes_img/forum.gif",
				"width" : 16, "height" : 16
			}
		}
	},
	{
		"text" : "Contact Us",
		"style" : {
			"imgitem" : {
				"src" : "themes/gray/themes_img/contact.gif",
				"width" : 16, "height" : 16
			}
		}
	} ]
};