Migrating from Visual Menu Maker 2.x to 3.x

Menus created in versions of VMM (Visual Menu Maker) less than 4.0 must be opened in VMM, re-published and re-uploaded.

It is recommended that you make a backup copy your pre-version 4.0 VMM projects before you import them into current versions of VMM. Some changes were introduced into VMM 4.x that are not compatible with earlier versions. Please read the following:

Prior to VMM version 4.x, the Visual Menu Runtime Kernel was named visual-menu.js. To be consistent with the naming conventions of other Visual Menu related files, the Visual Menu Runtime Kernel has been renamed to vm-menu.js.

Prior to VMM version 4.x, shadows were described by proprietary Internet Explorer filters: Here is an example:

.vm-sub-menu
{
filter: progid:dximagetransform.microsoft.shadow(color=#666666,direction=135,strength=2)
}

The problem with this type of shadow is that it only works in Internet Explorer. It also does not allow for fine granular control over the exact color and transparency of shadow bands, and does not give you control over the initial shadow offset.

VMM 4.x introduces cross-browser shadows. Cross-browser shadows are comprised of three separate layers, all of which are defined by the following Menu Selector Constants: menu-shadow1, menu-shadow2, and menu-shadow3. Here is example of CSS which describes a shadow:

.vm-sub-menu-shadow1,
.vm-sub-menu-shadow2,
.vm-sub-menu-shadow3
{
   background: #ACACAC;
}

.vm-sub-menu-shadow1
{
   opacity: .9;
   filter: alpha(opacity=90);
}

.vm-sub-menu-shadow2
{
   opacity: .3;
   filter: alpha(opacity=30);
}

.vm-sub-menu-shadow3
{
   opacity: .1;
   filter: alpha(opacity=10);
}

In order to see cross-platform shadows, you must define the shadowOffset Menu Data Attribute.

If you attempt to import a pre-version 4.0 project into VMM 4.x, it will disable all Microsoft specific shadow filters in the menu's style sheet, vm-style.css, and will add the generic shadow Menu Selector Constants shown in the sample above to vm-style.css. The shadow will not be visible until the shadowOffset Menu Data Attribute is defined. You can do this in VMM by going to the "Menu Appearance" step, selecting the "Sub Menus" tab, and setting the "Shadow Offset" property to a value other than "0 (No Shadow)".

Prior to VMM version 4.x, separators in Horizontal Base Menus, also known as vertical separators, were created with the "|" character. The sep-inner Menu Selector Constant used mostly text-specific attributes to describe this character. Here is an example of the old way of defining CSS for vertical separators:

.vm-base-sep-inner
{
   font-size: 8pt;
   font-family: verdana;
   text-align: left;
   color: #adaaad;
   padding-right: 1px;
   padding-left: 1px;
}

The problem with this was that there were inconsistencies in how the vertical separator was rendered across browsers. It was also very limiting aesthetically, because it didn't allow for background images or borders.

Here is an example of the new method of defining vertical separators:

.vm-base-sep-inner
{
   border-left: 1px solid black;
   border-right: 1px solid black;
   width: 3px;
   background: green;
}

This defines a 3 pixel wide green separator, with 1 pixel black borders on each side.

Note that padding is not compatible with version 4.x selectors.

If you attempt to import a pre-version 4.0 project into VMM 4.x, it will set any previous padding defined in the separator's CSS to 0. It will also add generic selector attributes. If you were using vertical selectors in your previous menu, you will probably need to re-style the selectors by going to the "Menu Appearance" step and selecting the "Base Menu" tab. You can then adjust the properties in the "Separator" category so that the separator is to your liking.

Migration Guide