![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
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.
You can see an example where all enumerated features are present here - Menu Custom Borders Read more about CodeThatMenu >>
|