Overview

Adaptive Menu Magic is the ultimate automated Menu builder for Dreamweaver. Learn how the menu works, how to configure it, and how to style it.

I already have Pop Menu Magic, Drop Menu Magic, or a Bootstrap Menu, or a jQuery menu.
Why should I consider Adaptive Menu Magic?

Because it's a better menu. In fact, nothing else comes close. Here's a few reasons why:

  • Adaptive Menu Magic (AMM) always fits. That is, it will never wrap to more than a single line. If your page is not wide enough to display all of the root menu items, a new menu item will be generated. By default, this menu item is called More... But you can change the name to match your needs, or your local language, in the AMM user interface.
  • AMM supports the Aria web accessibility standard, as well as standards for keyboard navigation.
  • AMM supports smooth scrolling to any element on your page, making it a breeze to design single page sites or special-purpose pages.
  • AMM allows you to choose a color set for the root menu, the root menu items, and the sub-menus. In all, this gives you over 6,000 color combinations.
  • AMM also allows you to set colors for individual menu items.

Installing Adaptive Menu Magic (AMM)

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. To install AGM, open your Adobe Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Accessing Adaptive Menu Magic

There are 3 ways to access AMM. Choose the one most suitable to your workflow. When you open the interface, the system will detect the appropriate mode (Insert or Modify) based on where your cursor is.

When you are Creating a new AMM menu instance, place your cursor on your page where you want to build your widget. If Modifying an existing instance, place your cursor anywhere inside the existing menu and use one of the 3 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. AMM is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. AMM is the last one in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Adaptive Menu Magic by PVII

If your cursor is not inside another AMM instance, the main UI will open in Create Mode.

If your cursor is inside an existing menu, the UI will open in Modify mode.

Converting Menus Made with other menu builders

AMM will convert any list-based (UL) menu, including Pop Menu Magic (all versions), Drop Menu Magic, Layout Builder NAV, Bootstrap, jQuery, and more.

Simply place your cursor inside your existing menu and open the AMM interface.

The Convert UI will open...

To convert your existing APM widget, click the Convert to AMM button.

The main interface will come into focus.

Set your options and click OK to finalize the conversion.

AMM Menu Item Options & Settings

The AMM interface makes customizing your menu easy!

Creating a new menu

The UI allows you to easily define and configure a menu. Once configured, the UI can be used to modify (edit) your menu as often as you like. Follow the steps below to create a new menu:

Position your cursor where you would like your menu to be created

Open the AMM UI, as described above.

Note: When creating a new menu make sure your insertion point is outside of any existing menu instance. You can create more than one menu on a page.

Options and Settings

Menu Items Command Buttons

Add Item

Adds a new menu item below the one that is selected

Add Sub

Adds a sub-menu to the selected menu item.

Delete

Deletes the selected menu item. If the selected item has a sub-menu, the sub-menu will also be deleted.

Up

Moves the selected item up in the listing.

Down

Moves the selected item down in the listing.

Menu Item Settings

Each menu item has several available settings, such as its text label, page it is linked to, among others.

Item Link Text

Enter the text to be displayed for your link.

Priority

AMM menus always fit in the available horizontal space. When the system detects that the menu will begin to wrap to multiple lines, the system will begin to move menu items to a new, generated menu item called "More...", which is placed at the rightmost edge of the root menu. The "More..." label can be edited to suit your design or your language.

Select a number from the drop down list, between 0-9. Lower numbers are moved to the "More..." menu first. If you leave each menu item set to the default value of 0, then menu items will be moved to the "More..." sub-menu in order, from left to right.

User Class

You can assign an optional User Class to the selected menu item. For example, if you want a particular menu item to be red, assign the class red. For color, you can choose from any of the 19 color sets in AMM style sheet:

white

black

silverblue

rust

orange

red

gray

green

mint

blue

skyblue

silver

purple

lavender

beige

wine

forest

mist

gold

Here's an example:

We set one of the links to the User Class red:

And it renders like this:

This means, you can custom color any or all menu items in your AMM menu!

You can also define your own class name. For instance, you might want a particular link to use a different font and have a border on top. To do that, come up with a name. Let's call it serif-topbord:

Now write a corresponding CSS class in your style sheet:

.p7AMM ul li a.serif-topbord {
font-family: "Comic Sans MS", cursive;
border-top: 1px dashed #999 !important;
color: teal;
}

And this is what you get:

 

We use .p7AMM ul li a as a preface for specificity. The actual class entered in the User Class box is still simply serif-topbord.

The !important directive is only needed for borders.

There is one rule you must follow when naming your user class: it must never contain the text string amm in any part of its name

Link Path

Enter the page address you wish to link to. If the linked page is in your local site, you can use the Browse... button to locate it quickly.

Target

Enter a target if you'd like the linked page to open in a new window or browser tab.

Scroll to Element

AMM allows you to set links that smoothly glide to elements on other parts of the current page. Those elements must be assigned an ID. For instance, if you have a heading below the fold, called Custom Support, give that element a logical ID:

<h2 id="support">Customer Support</h2>

Now you can scroll to that section of the page by simply entering support in the Element ID box:

General Options

There are many options you can use to configure your AMM menu just the way you want.

Menu

The Menu option enables you to align your menu Left, Centered, or Right.

Z-Index

This option, set to 900 by default, enables you to set the stacking order for your menu. Higher numbers bring your your menus toward the top of the page's stacking order.

Constrain

AMM includes a configurable edge detection option to keep sub-menus inside the visible window or menu container element. You can choose from 3 settings:

  • None: When you don't want any edge detection.
  • Window Edge: Constrains sub-menus inside the horizontal and top edges of your browser window. This will assure that sub-menus are always within the browser's visible viewing area.
  • Menu Width: Constrains sub-menus inside the horizontal edges of the root AMM menu container and the top edge of the browser window.

Vertical Menu

Check this option if you would like the current menu to have a vertical root—for example, if the menu is going to be displayed in a narrow sidebar.

First Sub Level

These options apply to only the first-level sub-menus.

Align

Align the first sub-level Left, Center, or Right, based on its parent menu item.

Top Offset

Create a vertical gap between the root menu item trigger and its sub-menu. We suggest keeping this to a minimum because if the user's cursor lingers in the gap created by the offset, the sub-menu will close. Positive numbers shift the menu down. Negative numbers shift the menu up.

Left Offset

Shift the first level sub-menu left or right of its parent menu item. Positive numbers shift the menu right. Negative numbers shift the menu left.

Sub Menus

These options apply to the second and subsequent level sub-menus.

Flyout to Left

Set flyouts to always open to the left of their parents. Edge detection will prevent them from moving off-screen.

Sub Offset Top

Move the sub-menus up or down. Positive numbers shift the menu down. Negative numbers shift the menu up.

Sub Offset Left

Move the sub-menus left or right. Positive numbers shift the menu right. Negative numbers shift the menu left.

Responsive

These options define or augment the responsive nature of your menu.

Enable Responsive Conversion

This option (enabled by default) determines whether or not your menu collapses to a hamburger (≡) driven accordion menu at a breakpoint determined in your AMM CSS media query. By default, the media query will trigger the conversion at a viewport width of 600 pixels. You can edit the max-width in the media query to suit. The media query is found toward the bottom of your menu CSS file:

@media only screen and (min-width: 0px) and (max-width: 600px)

Start With Toolbar Closed

With this option enabled (it is by default) when your menu converts to an accordion on small devices, the root menu items will be visible. Deselect this option and your menu will collapse to show only the hamburger (≡) icon.

Show Toggle Text

If you enable this option, the text Show Menu or Hide Menu will appear to the left of the hamburger (≡) icon.

Note: Should you need to change the language of the Toggle text, you can edit it in the AMM CSS file, using these two rules:

.p7AMM.amm-responsive .amm-toolbar.closed a:before {
content: "Show Menu";
}
.p7AMM.amm-responsive .amm-toolbar.opened a:before {
content: "Hide Menu";
}

Trigger Action

These options control how the menu is operated via mouse or window scrolling.

Enable Mouse Action

This option (enabled by default) allows the menu to be operated on mouse over. If you uncheck it, mouse users will need to click the triggers in order to make sub-menus appear. Regardless of this option's setting, touch devices will still operate on touch, and keyboard users will still be able to use the keyboard arrow keys to operate the menu.

Fixed Position on Page Scroll

Check this option to allow the menu to remain on the screen when the page is scrolled downward. The menu will always be visible and the page content will scroll underneath it.

Animation

Choose an animation for the sub-menus.

Duration

This is the amount of time the animation will run. Increase the value to slow the animation down. Decrease the value to speed it up.

Current Marking

This box is checked by default to enable automatic current marking (highlighting) of links in your menu. The system looks for links in the menu that match the current page address. When a matching link is found, it's highlighted (made bold).

Include URL Parameters in Match

This option controls whether the automatic current-marking feature will include any URL parameters in the page address when looking for a matching link in the menu. Check this box if you wish to have your URL parameters included in the match criteria.

Accessibility

Options to enhance accessibility.

Aria Label

Aria accessibility guidelines recommend using a label on the menu root as an aid for assistive reader users to understand the menu's purpose. You can edit the label to suit your needs and your local language.

Priority Label

Use the Label option to set the text label for the special generated link that houses root menu items that would ordinarily wrap. The default is More... but you can change it to whatever you want.

Styling Options

The following options allow you to quickly style the look of your menu.

Root Menu Styling

Style the root menu DIV.

Root Menu Color Drop-Down List

Choose a color set from the drop-down.

Transparency

This option will set a slight amount of transparency on your root menu, if a color other than None has been selected.

Border

Sets a 1px border around your root menu.

Rounded

Rounds the corners of your root menu.

Root Class

Set a custom class on the root menu, which can be used to add styling attributes to the root or as the basis for descendant selectors for any part of the menu. See the Tutorial Section for more information.

Root Links Styling

Style the root level links of your menu.

Root Links Color Drop-Down List

Choose a color set from the drop-down.

Border

Sets a 1px border around your root menu links.

Rounded

Rounds the corners of your root menu links.

Sub-Menu Styling

Style your menu's sub-menus.

Sub-Menu Color Drop-Down List

Choose a color set from the drop-down.

Transparency

This option will set a slight amount of transparency on your sub-menus.

Border

Sets a 1px border around your sub-menus.

Rounded

Rounds the corners of your sub-menus.

UI Command Buttons

The right edge of the UI contains a set of command buttons. The button set will differ by one depending on whether the UI is open in Create or Modify Mode.

Create Mode Command Buttons

OK

Build the menu

AC Marker

Open the Advanced Current Marker UI (See Below)

Cancel

Close the UI without adding a menu to your page.

Help

Open this user guide.

Modify Mode Command Buttons

The Modify UI adds on additional button: Remove.

Remove

Click this button to remove the selected menu. If this is the only menu on your page, the links to the AMM CSS and script files will also be removed.

Advanced Current Marker

Open the Advanced Current Marker UI by clicking the AC Marker command button.

There are four methods:

None: Disable all current marking for this menu

The None option allows you to completely turn off all current marking for this menu on this page only. This is a special override that allows you to have the menu working with current marking turned off on a specific page while it is enabled on other pages.

Match to a specific Link Text in the menu

The Link Text option allows you to select the text of any one of the existing links in your Pop Menu Magic 3 menu as the target for the current marker. When the page loads, the system will look for this text in the menu markup. If a match is found it will apply the current marker style class to the menu link.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default current marker instead.

Match to a Specified URL in the menu

The URL Match option allows you to select the link value (the href) of any one of the existing links in the Pop Menu Magic 3 system as the target for the current marker. When the page loads, the system will look for this link value in the menu markup. If a match is found it will apply the current marker style class to the menu link.

The simplest and most direct method for Advanced Current Marking is to use the Text Option. However, there may be occasions where you have duplicate text values in the menu. In these cases, you can use the URL match option to target a specific link for current marking.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default current marker instead.

Use Folder Name :: Link Text Pairs

The Folder:Text Match option is designed to allow you to handle large numbers of current marker exceptions and is typically used as a global option applied to every page. Use this option when you have a large number of pages that are not represented in the menu.

This option allows you to specify a series of folder names and link text values that the system will use for determining the current marked link in the menu. For example, you can specify that any page which contains the folder "support" in its URL will be matched to specific link text "Information". This is referred to as a Folder Name :: Link Text pair.

You can specify as many of these Folder Name :: Link Text pairs as you like. The system will test each pair until it finds a match. If a match is found it will apply the current marker style class to the menu link to provide the "you are here trail" in the menu. You can use this system to automatically handle current marking for all of your site's pages without having to edit any of them individually.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default Current Marker instead.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phones: (330) 650-3675 | (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.