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.
Because it's a better menu. In fact, nothing else comes close. Here's a few reasons why:
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.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...
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.
Switch to the PVII category. AMM is the last one in the screen capture below
Switch to the PVII category. AMM is the last one in the screen capture below
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.
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.
The AMM interface makes customizing your menu easy!
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:
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.
Adds a new menu item below the one that is selected
Adds a sub-menu to the selected menu item.
Deletes the selected menu item. If the selected item has a sub-menu, the sub-menu will also be deleted.
Moves the selected item up in the listing.
Moves the selected item down in the listing.
Each menu item has several available settings, such as its text label, page it is linked to, among others.
Enter the text to be displayed for your link.
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. Higher 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.
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
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.
Enter a target if you'd like the linked page to open in a new window or browser tab.
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:
There are many options you can use to configure your AMM menu just the way you want.
The Menu option enables you to align your menu Left, Centered, or Right.
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.
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:
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.
These options apply to only the first-level sub-menus.
Align the first sub-level Left, Center, or Right, based on its parent menu item.
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.
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.
These options apply to the second and subsequent level sub-menus.
Set flyouts to always open to the left of their parents. Edge detection will prevent them from moving off-screen.
Move the sub-menus up or down. Positive numbers shift the menu down. Negative numbers shift the menu up.
Move the sub-menus left or right. Positive numbers shift the menu right. Negative numbers shift the menu left.
These options define or augment the responsive nature of your menu.
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)
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.
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";
}
These options control how the menu is operated via mouse or window scrolling.
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.
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.
Choose an animation for the sub-menus.
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.
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).
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.
Check this box to enable the Active State marking for any Scroll to Element links in the root menu.
Options to enhance accessibility.
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.
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.
The following options allow you to quickly style the look of your menu.
Style the root menu DIV.
Choose a color set from the drop-down.
This option will set a slight amount of transparency on your root menu, if a color other than None has been selected.
Sets a 1px border around your root menu.
Rounds the corners of your root menu.
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.
Style the root level links of your menu.
Choose a color set from the drop-down.
Sets a 1px border around your root menu links.
Rounds the corners of your root menu links.
Choose a color set from the drop down.
Style your menu's sub-menus.
Choose a color set from the drop-down.
This option will set a slight amount of transparency on your sub-menus.
Sets a 1px border around your sub-menus.
Rounds the corners of your sub-menus.
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.
Build the menu
Open the Advanced Current Marker UI (See Below)
Close the UI without adding a menu to your page.
Open this user guide.
The Modify UI adds on additional button: 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.
Open the Advanced Current Marker UI by clicking the AC Marker command button.
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.
The Link Text option allows you to select the text of any one of the existing links in your Adaptive Menu Magic 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.
The URL Match option allows you to select the link value (the href) of any one of the existing links in the Adaptive Menu Magic 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.
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.
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.
PVII maintains a Web Forum community. Go Direct to the Web Forum
E-Mail: support@projectseven.com
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.