Advanced borders
COOLjsMenu Professional has some advanced border features: borders can be configured separately - left, right, top, and bottom. This can be done using styles. Here is the code describing node style with left and right borders:
var STYLE_LEFTRIGHT = { border:1, borders:[1,0,1,0], shadow:0, color:color, css:css};
"border" field denotes if there will be some border, and "borders" field defines widths in pixels for each side: left, top, right, bottom.
To define menu without separators, you need tree styled: for the first item, for the last item, and for the others:
var STYLE_V_FIRST = { border:1, borders:[1,1,1,0], shadow:0, color:color2, css:css };
var STYLE_V_MIDDLE = { border:1, borders:[1,0,1,0], shadow:0, color:color2, css:css };
var STYLE_V_LAST = { border:1, borders:[1,0,1,1], shadow:0, color:color2, css:css };
...
{code:"Vertical",
sub:[
{style:STYLE_V_MIDDLE},
{code:"SubItem 1", format:{style:STYLE_V_FIRST}},
{code:"SubItem 2"},
{code:"SubItem 3"},
{code:"SubItem 4", format:{style:STYLE_V_LAST}}
]
}
All items have default style STYLE_V_MIDDLE. First and last items explicity override this style with STYLE_V_FIRST and STYLE_V_LAST. These styles differ only in border declaration.
