Understanding the Flexi CSS menu elements

Flexi CSS Menus Documentation

With the Flexi CSS Menus Dreamweaver extension you can create beautiful pure CSS menus that will work the same in all browsers. To save time, you can start from any of the 45 dropdown, vertical and tabbed templates and create your own color scheme to make the CSS menu blend perfectly with your overall site layout. There is no need to code or know CSS as all the menu settings are done quickly from the Dreamweaver interface.

Understanding the menu elements

One important step in customizing a menu to blend with the overall site layout is to understand the elements of the menu and what can be customized to obtain the desired look&feel. For each menu level we have:

the menu container
the buttons

The menu container

The menu container is basically the box where the menu buttons are placed.

For the menu container you can define:

size (width and height)
border
background (image or color)
padding

The most important element for the positioning of the menu buttons is the padding. The padding defines the distance between the container border and the buttons, so if you want to place the menu buttons in a specific position inside the menu container you have to combine the width and height of the menu with the padding and the button sizes to obtain the desired placement.

The menu buttons

For the menu buttons we have more elements that can be customized in order to create the look&feel:

text
size (width and height of the button)
padding
margin
border
background (image or color) and positioning

The margin

Menu button margin

The margin is space that can be added outside the button background or image to create a distance between the menu container or the other buttons.

The Padding

Button Padding

The padding is the distance between the button borders and the text. Note: if you add padding to a button, the overall size of the button will increase with the padding value, therefore to maintain the correct size of a button, you need to decrease the width and height of the button with the padding size.

The background positioning

As soon as you added padding to a button and use images for the button background, the image will be placed in the entire space created inside the menu (the entire space between the borders can be used by the button image). To position corectly the button text over the button image, you have to set the background image to be aligned top or bottom and adjust the padding in a way the text is placed in the correct position.