Borders, onborder, offborder, separator in global and item styles

JavaScript Menu, DHTML Menu Powered By Milonic

USING BORDERS and SEPARATORS

BORDERS: a global property, they are declared at the top of the menu_data.js file. They do not function in nor are a property of menu style or of item style. Related terms are: borderstyle, borderwidth, bordercolor.

Onborder & offborder: both a global and item style property. They can be declared in the top section or in a particular item. These properties require the use of a valid css declaration, i.e. offborder="1 px solid #fefefe";

Valid css borderstyles include: none, dotted, dashed, solid, double, groove, ridge, inset, and outset

SEPARATORS: a global style property and an item style property. This allows you to either declare a separator globally which will appear after each item, or to declare a separator only for a particular item.

PADDING: there are numerous padding items. These examples will use only padding.

The following are examples of using borders and separators with the applicable code given, this code would be placed into the global style at the head of the menu_data.js file. All other items such as fontstyle etc, are the same for each border example so that any changes are a result of changes in border styles. Examples using onborder & offborder and separators in a menu item are at the bottom of the page, and borders on menus with images or subimages will be another topic. The # and numbers are headers and don't react to mouseover.

TIP: If your borders or separators do not look as you want, remove any style sheet from the page, and if that corrects the problem then something in the style sheet is conflicting with whatever you have put in the menu style, also check your padding, using borders, separators and onborder and offborder with different padding can cause the border to behave erratically.

#1 = basic border no separators

bordercolor="#FF0000";
borderwidth=2;
borderstyle="solid";
padding=2;

#2 = basic border with separators:

bordercolor="#FF0000";
borderwidth=2;
borderstyle="solid";
separatorsize=1;
separatorcolor="#FF0000";
padding=2;

#3 = offborder only:
Once you declare a border using offborder the border remains visible around each item even in the mouseOn position. Note the right and left hand borders meet which is why what seems a 'separator' looks wider than the border

offborder="2px solid #FF0000";
padding=2;

#4 = uses onborder only
This demonstrates how the onborder function relates only to the menu items, not the menu. The border will not show until you mouseover the item. Because the # section is a header if you only use onborder that section will never have a border because header disables the mouseover feature.

onborder="2px solid #FF0000";
padding=2;

#5 uses offborder and onborder instead of border & separators and achieves a similar results. Note that offborder and onborder actually place a border around the item NOT the menu. As a result the 'separator' is really the border for the item which means they 'double' since each item has 4 borders.

offborder="1px solid #FF0000";
onborder="1px solid #FF0000";
padding=2;

#6 uses offborder, onborder & different colors
A different color is given for the onborder so on mouseOver the color will change.

offborder="1px solid #FF0000";
onborder="1px solid #FFFFCC";
padding=2;

#7 = uses border with a 1px width and onborder with 2px width and a different color
Using a 1px border, no separators, and onborder with a different width color, you can achieve an effect of one border around the full menu plus a different color border on each item onmouseOver 'inside' the original border

bordercolor="#FF0000";
borderstyle="solid";
borderwidth=1;
onborder="2px solid #33CCFF";
padding=2;

#7a The same as #7 with a 1px separator the same color as the border, & onborder The border and separator are width 1px, onborder is 2px. Note the only real difference from the previous one is the 1px red separator which is always visible

bordercolor="#FF0000";
borderstyle="solid";
borderwidth=1;
separatorcolor="#FF0000";
separatorsize=1;
onborder="2px solid #FF0000";
padding=2;

#7b Uses border, offborder and & onborder The border is width 1px, offborder and onborder are 2px. There is no separator in this border, the offborder which applies to each item puts what seems to be a separator between items, but it is actually the left and right border where the items meet.

bordercolor="#FF0000";
borderstyle="solid";
borderwidth=1;
offborder="2px solid #FFCC00";
onborder="2px solid #33CCFF";

#7c = uses only offborder This provides what seems to be a border and separators. Note: because offborder applies itself to each item, what appears as a wider separator is really the left and right borders where items meet offborder="1px solid #FF0000";	#7d uses offborder and onborder offborder="1px solid #FF0000"; onborder="2px solid #33CCFF";	#8 border & separator properties Border is 1px, the rest is separatorsize, separatorpadding, separatorheight, separatoralign properties, which give what looks like a 'dot' has been placed between items. The border could be eliminated. bordercolor="#FF0000"; borderstyle="solid"; borderwidth=1; separatorcolor="#00FFFF"; separatorsize=2; separatorheight=2; separatorpadding=4; separatoralign="center";
Offborder, Onborder and Separators Used as an Item Property
Valid css declarations i.e. onborder=1px solid #fefefe; are required in this construction. Unlike the global style which takes quotes around the declaration, there are no quotes in an item declaration, only an ending semi-colon. Although you can use separatorpadding, these examples will not use any specified padding other than the padding=2; which has been declared in the global style for the menu. As an example I'll use the Links item from the menu to show coding. Separatorsize and separatorcolor are coded just as in global styles but without the quote marks i.e. separatorcolor=#fefefe; aI("text=Links;url=http://www.whatever.com;offborder=1px solid #fefefe;onborder=1px solid #ff000;");

#9 = uses onborder and offborder of different colors These are declared in each menu item. No separators or borders are declared in global styles. Note that there is no border in the header item. The next example has headerborder	#10 = uses onborder, offborder, separators and headerborder. A different color is declared for each, and they are declared in each menu item. No separators or borders are declared in global styles. headerborder=2px solid #ff0000; is coded into that item string.	#11 = uses onborder and offborder in only the Home item. Note: even though onborder is applied to only Home once it is moused over it sets itself as a 'global' property and appears on all items. Mouseover the right items, then home, then right again
Other CSS BORDERSTYLES
Below are examples of what you can do in design using other css borderstyles and mixing global and item styles.

RIDGE - Declared in global style:

offborder="3px ridge #33FFCC";
onborder="3px ridge #FFCCFF";
padding=4;

Outset - used with borderstyle which applies to the whole menu and Groove - used with on/offborder declared in global styles:

bordercolor="#FF0000";
borderstyle="outset";
borderwidth=2;
offborder="4px groove #33FFCC";
onborder="2px groove #33CCFF";
separatorcolor="#FF0000";
separatorsize="1";
padding=4;

This uses on/off class declared in the head of this page defining each border i.e. border-top: 2px outset #FF0000; and so on for each border, top and left being 2px, right and bottom being 1px. Then it is called in the global style with the rest of the coding. The menu class uses outset, and applies to the full border, the onborder uses groove and applies to each item. Separators are declared also in the global style.

offclass="menu";
onclass="menu";
onborder="2px groove #33CCFF";
separatorcolor="#FF0000";
separatorsize="1";
padding=2;

SOLID - declared in global style with separators:

bordercolor="#FF0000";
borderstyle="solid";
borderwidth=2;
padding=4;
separatorcolor="#FF0000";
separatorsize="1";

DASHED and OUTSET - declared in items in the aI string:

onborder=3px dashed #33CCFF;
offborder=3px outset #FF33CC;

Everything is declared in global styles, no separators used:

bordercolor="#330099";
borderstyle="solid";
borderwidth=2;
offborder="2px outset #b3ecff";
onborder="3px inset #CC33FF";
padding=4;

This was created using all the global color styles in the items, the bgcolors, the colors, and the borders, border colors and styles.

There are many combinations that can be used to create distinctive borders and color combinations for your menu.

download sample page and data file

NOTE: if you decide to get creative with borders remember to get your site checked with different browsers and operating systems. Not all render every item the same. # Also, if you are using overfilters which apply to INTERNET EXPLORER only on windows OS, these can affect the look and position of the borders and other aspects of the menu. For example, dropshadow will seem to 'shift' borders.