CodeThatMenu User Manual 

  MENU CUSTOM BORDERS

The simle syntax for borders definition you can see in many our examples.

For example:

border: { width:2, color:'black' }

For creation advanced custom borders you can use properties that described at the example below:

border : 
{
	width:2,		// default border width

	color:'black',	        // default border color, 
                                // may not be used if needed

	t: {			// top border description

		size:120,	// not required, default size 
                                // is menu width plus sum of left
                                // and right border width

		offset:-2,	// offset from the left menu side. 
                                // Default value is -<leftborder>.width

		width:3,	// not required: border width, 
                                // overrides the default value

		color:'red',    // not required: border color, 
                                // overrides the default value

		el: [		// array of border elements
			{
				src: "img/url.gif",	//image URL
				width: 50,		//element width
				color: 'red'		//element background color
			},
			...
		]
	},
	b: {			// bottom border description, 
                                // properties are the same as for top
		...
	},
	l: {			// left border decription

		size:120,	// default value is menu height

		offset:-3,	// default value is 0
		...
	},
	r: {			// right border description

		size:120,	// default value is menu height

		offset:-3,	// default value is 0
		...
	}
}

Below you can find more detailed information about several of these properties.

size - it's a height for vertical border and width for horizontal borders. By default vertical border size it's menu width plus sum of vertical borders width, horizontal border size is menu height.

offset - for vertical borders it's vertical offset relatively to the top menu edge, for horizontal borders - horizontal offset relatively to the left menu edge.

el - you can out here an image that will be a background for you border.

If you don't specify an image, menu use transparent image with appropriate width and height.

In case you'd like to create automatically extended border you shouldn't specify image for border left and right side and set center backroun image transparent:

el: [
	{ src:'img/ugolok1.gif', width:10 },
	{},
	{ src:'img/ugolok2.gif', width:10 }
]

Also you can specify an image but don't set image size. In this case image would be expanded automaticaly relatively to menu size.

  EXAMPLE - MENU CUSTOM BORDERS

You can see an example where all enumerated features are present here - Menu Custom Borders

Read more about CodeThatMenu >>