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)
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. 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.
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.
Use STE Active Marking
Check this box to enable the Active State marking for any Scroll to Element links in the root menu.
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.
STE Active
Choose a color set from the drop down.
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 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.
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 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.
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
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.