Border Tips
Button Borders
The cssListMenu Plus makes it very easy to configure different button configurations. The information on this page will illustrate the differences in border configuration.
Remember: No matter which configuration you opt to use, you can change it at any time, for any menu you have on your page, so be creative and experiment a little.
Sometimes you want a menu with buttons that are tightly packed and no spacing between the buttons, other times you want a little gap between the buttons. When using CSS for button borders this has to be considered how you want to configure the menu so it will appear as you have it in mind.
Below are examples of different button/border configurations that will give you an idea of how to achieve the look you are after.
Four borders beveled
The beveled button uses 4 borders. The example below has no spacing between the buttons but you could add spacing and it will still retain an appealing look.
[ beveled 4 borders - no spacing between buttons ]
Four borders with spacing ( non-beveled )
This example uses 4 borders of the same color and 1pixel spacing between the buttons.
[ buttons with 4 borders - 1px spacing between buttons ]
Four borders no spacing
When using 4 borders on the buttons, unless you use a beveled effect, the adjoining borders will double up and appear twice as thick as the outermost borders as in the illustration below. This may be acceptable and the look you are after however.
[ buttons with 4 borders - 0px spacing between buttons ]
You may be wondering how to have an equal border around the buttons, with no spacing in-between, so that each button has a 1 pixel border but there are no gaps between the buttons. To achieve this you need to use only 3 borders on the buttons themselves as in the following example.
Three borders no spacing
For horizontal menus using 3 borders the left border is omitted from each button. If you assign the buttons with 3 borders and no spacing, the end result will look like the example below. It's clean, and the look we are after but the lack of a left border on the 1st button leaves the menu looking incomplete.
[ buttons with 3 borders - 0px spacing between buttons ]
The solution for this is to place the menu inside of a container div and assign it a left border only. This fills in the missing left border on the menu itself. The end result appears like the example below, an equal border around all sides with no doubling of adjacent borders.
Note: The cssListMenu Plus will insert the missing border should you decide to use a 3 border configuration. The information on this page is provided to serve as a guide and general information as to the differences in button structure when using 3 or 4 borders.
[ buttons with 3 borders - 0px spacing between buttons ]
Button Left Border
The Button Left Border option refers to using a left border for the individual buttons, not the entire menu. When this option is checked, each button will have 4 borders. If it is not selected each button will have 3 borders.
Vertical menu buttons
The same principals described above also apply to the vertical menus as well. The only difference is on the vertical buttons, the top border is omitted from the buttons ( instead of the left for horizontal menus ) and the top border is applied to the container to fill in the missing border on the first button when using 3 borders.
Border Type
By default the borders are defined as solid. You can define the borders for the norm state and over state individually from the interface. This, as well as any other setting of the menu can be changed at any time.
The three most common border types have been included in the selection. If you do not want a border set the interface "border" field to 0.
Note: The MenuPreview Panel will display a 1pixel border only. If you enter a larger number in the border field, your actual menu will accept the larger value, however due to interface size constraints we were allowed enough room to display only a 1 pixel border in the MenuPreview Panel.
PROCEED TO SECTION ONE ( Vertical Configurations
