CSS Flexi Menus banner


Flexi CSS Menus Documentation

box Flexi CSS Menus

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.

The menu container

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.


The submenus

The submenus settings are similar to the above with very few differences:

  • the positioning establishes where the submenu is placed in relation with the upper level

Submenu positioning

  • you can copy the submenu styling from his parent menu
Download a free trial of Flexi CSS Menus
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6