Documentation

A. Installation and Registration

A.1 Installation

For Dreamweaver CS5, CS5.5, CS6, CC
- open the "FlexiMenus_v2.zxp" file using Adobe Extension Manager
- restart Dreamweaver

For Dreamweaver CS4 - open the "FlexiMenus_v2.mxp" file using Adobe Extension Manager CS4 - restart Dreamweaver

A.2 Registration

1. Where to find the extension in Dreamweaver

Extend Studio products are available in the Insert Window in Dreamweaver. Press CTRL+F2 (Command+F2) to display the Insert Window.
If the Insert Window is displayed as Tabs below the main Dreamweaver menu, the Extend products should appear on the right side of the Tabs.
If the Insert Window is displayed as Floating Panel (usually displayed on the left or right of the working area, depending on the Workspace settings: developer, designer etc) you need to click on the "Common" drop-down - marked with a down arrow and the Extend Studio products should appear in the pop-up list.

2 Registration Errors
The error messages could be due to many different reasons - choose a solution from the list (below) which corresponds to the error code displayed on your screen.
301 : This message indicates that the license key which you have entered is already in use. If you are trying to install a single user license - you would have to reset the license from the Extend Studio website - "My orders" section.
License Invalid: this implies that the serial number entered by you is incorrect. Make sure you are entering the correct license key.
If it still doesn't work, go to Account "My orders" section and from there you can obtain the correct license key.
If you need more assistance regarding registration, you can email us to support [at] extendstudio.com

A.3 Menu types

There are 3 types of menus available: Horizontal (dropdown), Vertical and Tabbed. Click here to see the three menu types.
Each menu type can be purchased as individual extension or as a pack with all 3 included.

B. Flexi Menus "Insert" window

The insert interface of the extension will appear after you click the "insert horizonta/vertical/tabbed menu" button.

Flexi Menus 2 for Dreamweaver insert window

B.1 Choosing the skin

There are 21 skins available by default, each one with 10 (light/dark) color schemes to choose and insert. When you browse through skins, you'll see a preview on the left side of the interface. You can choose a skin on a light or on a dark background, depending on your website color pallette and choose the one that fits best.

B.1.a Color schemes

You can choose from various color schemes depending on your website color pallete. Everytime you click on a color scheme, you will get a preview of the skin with the color scheme that you have chosen.

B.1.c "Dark" background, "Light" background

The dark and light background buttons help you choose the right color scheme depending on your website colors. If your website color theme is darker you may want to choose a dark color scheme.

B.2 Menu settings sidebar

B.2.a Name

Insert a menu name inside the text field. The name should not contain spaces or special characters. The menu name can include only letters and numbers, with no space between them.

B.2.b Width and height

You can set the menu width and height in pixels, percents(%) or auto, by typing the values into the text fields.

B.2.c "Enable mobile menu"

The "enable mobile menu" option enables the mobile version of the menu. You can preview the mobile version after inserting the menu in the page. If you choose to insert the menu without the option enabled, you can enable it later from the Property Inspector.

!Note After clicking the "Insert" button, you will get a message telling you that "Dreamweaver Design View is not able to display color gradients and some css3 properties. Please test in browser to see how the menu looks". Click "Ok" and the menu will be inserted in the page.

C. Extend Property Inspector

The property inspector interface will appear automatically when you select a component of the menu or the menu itself. Here you can edit the looks of the menu and also the menu items.

Flexi Menus 2 for Dreamweaver Property Inspector

C.1 Menu Items

This tab allows you to change menu items and levels.

Flexi Menus 2 for Dreamweaver Property Inspector

C.1.a Add, edit, move and delete menu items

Insert a menu name inside the text field. The name should not contain spaces or special characters. The menu name can include only letters and numbers, with no space between them.

"Link" - Set the URL for each menu item
"Open In" - Choose how to open the link when clicked: in a blank page (_blank), or in the same page (_self).

C.2 Desktop Settings

C.2.a Main Menu/Submenu/Rest of Submenus

C.2.a.i Container

The container represents the menu that wraps all the rest of the components in it.

Flexi Menus 2 for Dreamweaver Property Inspector

1. Size
Here you can set the element dimensions. If "Auto width" property is enabled, menu width will resize automatically depending on the width of the elements included. You can add width and height values in px or percentage.
Flexi Menus 2 for Dreamweaver Property Inspector
2. Background
There are more options to style the background of an element:
1. Full color background
2. Gradient background - click on the "gradient" icon and the gradient control will appear.
You can add as many droplets as you want by clicking at the bottom of the gradient bar. By clicking the 'more settings' button, you will be able to set the gradient orientation and direction.
3. Background image - click on the "image" icon and the image background settings tab will appear. You can set a background image by uploading one from your computer - click the folder icon to upload a background image. From the 'more settings' tab you can set: the background repeat, the attachemnt type, the horizontal and vertical positions and the x and y offsets.

Flexi Menus 2 for Dreamweaver Property Inspector

3. Border Here you can set the border of the element - its width and color .
Click the "more settings" button to set individual borders to each side of the element. If you enable the "link" icon it will add the same value to all 4 sides. The refference value is the top value.

Flexi Menus 2 for Dreamweaver Property Inspector

4.Padding and margin
The padding: The padding is the distance between the button borders and the text. When you add padding to an element, the Property Inspector will automatically adjust the space available for the element's children.
The margin: The margin is space that can be added outside the button background or image to create a distance between the menu container and buttons.

Flexi Menus 2 for Dreamweaver Property Inspector

5. Align buttons
The menu container can be aligned to the left, center or right side inside the element that includes it.

Flexi Menus 2 for Dreamweaver Property Inspector

6. Rounded corners
The "rounded corners" control allows you to add rounded corners to the menu container.

Flexi Menus 2 for Dreamweaver Property Inspector
If you enable the "link" icon it will add the same value to all 4 corners. The refference value is the top-left value.
If you want custom values for each corner, you will have to unlink corners - represented by the middle "link" icon.

6. Box shadow

Flexi Menus 2 for Dreamweaver Property Inspector

Adds a shadow to the container.
Click the "more settings" button to open the advanced controls, where you can set the shadow color, transparency (measured in percents) the X and Y offsets (horizontal and vertical distance), blur amount and whether it's an outer or inner shadow.

7. Animation
The animation effect can be set in the 'First Submenu' and in the 'Rest of submenus' tabs (also in "Second submenu" for Tabbed menu type).

Flexi Menus 2 for Dreamweaver Property Inspector

The available effects are: fade, bounce, blind, clip, drop and slide.
From the advanced controls, you can set the duration of the effect and the easing animation.

8. Positioning

Flexi Menus 2 for Dreamweaver Property Inspector Here you can set the z-index of the menu container. The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.



C.2.a.ii Buttons

1. State tabs

Flexi Menus 2 for Dreamweaver Property Inspector
The state tabs allow you to choose different styles of an element depending on the state that it is in.
The three states in the Flexi menus Property Inspector are: up - a normal, unvisited element; over - an element when the user mouses over it; selected - an element it is currently selected In the over and the selected tabs you have the option to copy style from the other states.

2. Size

Flexi Menus 2 for Dreamweaver Property Inspector

Here you can set the button dimensions. You can add width and height values in px or percentage values and also "auto" which will automatically calculate the size.

3. Padding and margin

Flexi Menus 2 for Dreamweaver Property Inspector
The padding: The padding is the distance between the button borders and the text. When you add padding to an element, the Property Inspector will automatically adjust the space available for the element's children. If you enable the "link" icon it will add the same value to all 4 sides. The refference value is top.
The 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. If you enable the "link" icon it will add the same value to all 4 corners. The refference value is the top-left value.

4. Background

Flexi Menus 2 for Dreamweaver Property Inspector
There are more options to style the background of an element:
- Background full color- click on the "solid color" icon and then the color button to choose a solid color from the pallette.
- Background gradient - click on the "gradient" icon and the gradient control will appear. You can also set each color transparency by adjusting the Alpha value. You can add as many droplets as you want by just clicking at the bottom of the gradient bar. By clicking the 'more setings' button, you will be able to set the gradient orientation and direction.
- Background image - click on the "image" icon and the image background settings tab will appear. You can set a background image by uploading one from your computer - click the folder icon to upload a background image. From the 'more settings' tab you can set: the background repeat, the attachement type, the horizontal and vertical positions and the x and y offsets.

5. Border

Flexi Menus 2 for Dreamweaver Property Inspector
Here you can set the border of the element - the width and the color of the border. Click the "more settings" button to open the 'advanced' tab where you can set individual borders to each side of the element. If you enable the "link" icon it will add the same value to all 4 sides. The refference value is the top value.

6. Rounded corners

Flexi Menus 2 for Dreamweaver Property Inspector
The "rounded corners" tab allows you to add rounded corners to the menu container. If you enable the "link" icon it will add the same value to all 4 corners. The refference value is the top-left value. If you want custom values for each corner, you will have to disable the "Use Top-Left for all" option - represented by the middle "link" icon.

7. Box shadow

Flexi Menus 2 for Dreamweaver Property Inspector
Adds a shadow to the element selected. Click the "more settings" button to open the 'advanced' tab where you can set the shadow color, transparency (measured in percents) the X and Y offsets, blur amount and inner shadow.

8. Customize

Flexi Menus 2 for Dreamweaver Property Inspector
You can individualize a menu button. For example, let's say you want the "Products" button to look a bit different to focus the visitor's attention on it. Select the Products button in the Design view in Dreamweaver. From the inspector, click on "Change this button only". Add a custom class name for the button. All the style settings that you make now for that particular button, will be applied on the class created and only on that button.

9. Copy styles

Flexi Menus 2 for Dreamweaver Property Inspector
Once you set the button style for the normal state, you have the option to copy the style from the normal state to the over and seleted states.

C.2.a.iii Arrow

The arrow indicates that the menu item contains submenus.

1. States tabs

Flexi Menus 2 for Dreamweaver Property Inspector
The state allows you to choose different styles of an element depending on the state that it is in.
The three states in the Flexi menus Property Inspector are:
up - a normal, unvisited element;
over - an element when the user mouses over it;
selected - an element at the moment it is selected;
In the over and the selected tabs you have the option to copy style from the other states.

2. Arrow image

Flexi Menus 2 for Dreamweaver Property Inspector
Select the image icon in order to upload an arrow image. Click on the folder icon and you will be able to browse for the arrow image on your computer.
It's reccommended that all the images that correspond to the menu are saved in the same DW site folder.

3. Align arrow

Flexi Menus 2 for Dreamweaver Property Inspector You have the option yo align the arrow image inside the menu item container. Select the position where you want the arrow to be placed.

4. Spacing

Flexi Menus 2 for Dreamweaver Property Inspector
You can add spacing between the arrow and the menu item container and menu item text. If you want the same spacing value for all sides, click on the middle link icon. The refference value is the top value.

C.2.a.iv Text

You can customize the text of menu items with the help of parameters from this tab.
he three states in the Flexi menus Property Inspector are:
up - a normal, unvisited element;
over - an element when the user mouses over it;
selected - an element at the moment it is selected;
In the over and the selected tabs you have the option to copy style from the other states.

1. Font
Choose the font family of the menu buttons. Flexi Menus 2 for Dreamweaver Property Inspector

2. Dimensions

Flexi Menus 2 for Dreamweaver Property Inspector
Set the font size, the line height (the line-height CSS property specifies the minimal height of line boxes within the element) - measured in percents, letter spacing (the horizontal spacing between letters) and the font-weight (specifies the weight or boldness of the font).

3. Style
Choose the text color, text style (bold, italic or underlined) and the text align. Flexi Menus 2 for Dreamweaver Property Inspector

4. Text shadow

Flexi Menus 2 for Dreamweaver Property Inspector
Text Shadow adds a shadow to the text elements. In the "more settings" tab you can set the shadow color, transparency (measured in percents) the X and Y offsets, blur amount and inner shadow.

Flexi Menus 2 for Dreamweaver Property Inspector

The offset property represents the distance / space between menu levels:
1. For the first submenu - it is the distance between the main menu and the first submenu;
2. For the rest of submenus - it represents the distance between the first submenu and the rest of the submenus.

C.3 Mobile Tab

This tab allows you to change menu items and levels.


Flexi Menus 2 for Dreamweaver Property Inspector

C.3.a Mobile settings

Here you can enable or disable the mobile version and also set the mobile max width (the mobile menu will be displayed when the device has a width of 0 - X, where X is the value you input in the "max-width" field).

C.3.b Tablet Settings

Here you can enable or disable the tablet version and also set the tablet max width (the tablet menu will be displayed when the device has a width of X - Y, where X is the value you input in the mobile "max-width" field and Y is the value you input in the tablet "max-width" field; for example, if you set mobile to 640px and tablet to 1023px, the tablet version of the menu will be displayed on devices having a width of 640-1023px).

The tablet version of the menu, will be displayed only when accessed from a tablet device (so it will not appear on desktop).
This is an optimized version, where first click on an item that has children will open the submenu (because tablets don't have an "Over" state), and 2nd click will follow link. There will also be a "close" button as last item in submenu containers, so the user can close submenus by clicking on it.

C.3.c Mobile Colors

You can change the colors of the mobile menu (background color, color for details, text color, color for mobile menu button and its text).

You can change the mobile menu button icon and the "back" button as well.

C.4 Collapse/Expand Inpsector Tabs

You have the option to collapse the Property Inspector to icons so you can see more parameters, by clicking the Collapse "<" button. If you want to display the full Property Inspector (with labels), click on the "Expand" button ">".

D. How to use the "Insert Existing Menu" function

The "Insert Existing Menu" function helps you insert the same menu on more pages of your site, so that you won't have to recreate the same structure and color scheme over and over again.
Once you have the same existing menu inserted on more pages, once you make a change to your menu, it will be modified on all pages.

E. FAQ

1. Can I use the license to build menus for an unlimited number of websites?
Yes. This is a single user unlimited license and this means that you can use it to build layouts for an unlimited number of websites.

2. Can I use the license to work on my both work and home computers?
We offer a secondary free license at the user's request. All you have to do is send an e-mail to support[at]extendstudio.com and ask for a secondary free license.

3. How can I move the extension to a new computer?
You will have to download the extension from your extend studio account and install in on the new computer. Before registering, you will have have to reactivate the serial number by pressing the correspondent "Reset license" button from your account.