Adaptive Menu Magic User Guide [Link]

htm

PVII AMM
USER
GUIDE

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 a l r e a d y h a v e Po p Me n u Ma g i c , Dr o p
Me n u Ma g i c , o r a B o o t s t ra p Me n u , o r a
jQu e r y m e n u .
W h y s h o u l d I co n s i d e r Ad a p t i v e Me n u
Ma g i c?
Because it's a better menu. In fact, nothing else comes
close. Here's a few reasons why:

Adaptive Menu Magic (AMM) a l w ay s fi

fitts . 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

1 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

menu items, a new menu item will be generated. By

default, this menu item is called M o r e . . . But you
can change the name to match your needs, or your
local language, in the AMM user interface.
AMM supports the A r i a w e b a c c e s s i b i l i t y
standard, as well as standards for keyboard
navigation.
AMM supports s m o o t h s c r o l l i n g t o a ny e l e m e n t
o n yo u r p a g e , making it a breeze to design single
page sites or special-purpose pages.
AMM allows you to c h o o s e a c o l o r s e t f o r t h e
root menu, the root menu items, and the sub-
m e n u s . In all, this gives you over 6,000 color
combinations.
AMM also allows you to s e t c o l o r s f o r i n d i v i d u a l
menu items.

I n s t a l l i n g A d a p t i v e Me n u Ma g i c ( A M M )
Extension installer files come in 2 formats: MXP and ZXP.
MXPs are supported by Extension Manager versions MX,

2 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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.

D r e a m w e a v e r CC 2 0 1 5 (a n d h i g h e r)
Extens io n Ins tallatio n Info r matio n
As of CC 2015, Adobe has ceased to support its own
Extension Manager. U s e t h e P V I I E x t e n s i o n M a n a g e r
f o r A d o b e C r e a t i ve C l o u d . . .

P V I I E x t e n s i o n Ma n a g e r f o r A d o b e CC
( Wi n d o w s a n d Ma c )
Download and Install Instructions

A cce s s i n g A d a p t i v e Me n u Ma g i c
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 C r e a t i n g a new AMM menu instance, place

your cursor on your page where you want to build your

3 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

widget. If M o d i f y i n g 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. Ins er t B ar
Switch to the PVII category. AMM is the last one in the
screen capture below

2 . I n s e r t Pa n e l
Switch to the PVII category. AMM is the last one in the
screen capture below

4 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

3 . I n s e r t Me n u
C h o o s e I n s e r t > S t u d i o V I I > A d a p t i ve M e n u M a g i c
by P V I I

5 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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.

6 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Co n v e r t i n g Me n u s Ma d e w i t h o t h e r m e n u
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.

7 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

The Convert UI will open...

A M M Me n u It e m Op t i o n s & S e t t i n g s
The AMM interface makes customizing your menu easy!

Cr e a t i n g a n e w m e n u
The UI allows you to easily d e fi
finne a n d c o n fi
figgu r e 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:

Po s i t i o n y o u r c u r s o r w h e r e y o u w o u l d l i ke y o u r
menu to be created
Open the AMM UI, as described above.

N o t e : 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.

8 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Opt i o n s a n d Se t t i n g s

Me n u It e m s Co m m a n d B u t t o n s
Ad d It e m
A d d s a new menu item below the one that is selected

Ad d Su b
Adds a sub-menu to the selected menu item.

9 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Del ete
D e l e t e s the selected menu item. If the selected item has a
sub-menu, the sub-menu will also be deleted.

Up
Moves the selected item u p in the listing.

Do wn
Moves the selected item d o w n in the listing.

Me n u It e m S e t t i n g s
Each menu item has several available settings, such as its
text label, page it is linked to, among others.

It e m L i n k Te x t
Enter the text to be displayed for your link.

Pr i o r i t y
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 " M o r e . . ." , which is

10 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

placed at the rightmost edge of the root menu. The

" M o r e . . ." 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 " M o r e . . ." menu first. If
you leave each menu item set to the default value of 0 , then
menu items will be moved to the " M o r e . . ." sub-menu in
order, from left to right.

Us e r C l a s s
You can assign an optional U s e r C l a s s to the selected
menu item. For example, if you want a particular menu item
to be red, assign the class r e d . For color, you can choose
from any of the 19 color sets in AMM style sheet:

white rust gray skyblue lavender

black orange green silver beige
silverblue red mint purple wine
blue

forest

11 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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

12 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

serif-topbord:

Now write a corresponding CSS class in your style sheet:

.p7AMM ul li [Link]-topbord {
font-family: "Comic Sans MS", cursive;
border-top: 1px dashed #999 !important;
color: teal;
}
And this is what you get:

13 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

We use . p 7 A M M u l l i 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: i t m u s t n e v e r c o n t a i n t h e t ex t s t r i n g a m m i n
a ny p a r t o f i t s n a m e

L i n k Pa t h

Enter the page address you wish to link to. If the linked page
is in your local site, you can use the B r o w s e . . . button to
locate it quickly.

Ta r g e t
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

14 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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 s u p p o r t in the Element ID box:
G e n e ra l Op t i o n s
There are many options you can use to configure your AMM
menu just the way you want.

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

Z- I n d e x
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.

15 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Co n s t ra i n
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:

N o n e : When you don't want a ny edge detection.

W i n d o w E d g e : 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.
M e n u W i d t h : Constrains sub-menus inside the
horizontal edges of the root AMM menu container and
the top edge of the browser window.

Ve r t i c a l Me n u
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.

Fi r s t S u b Le v e l
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.

16 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

To p O f f s e t
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.

Le f t O f f s e t
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.

S u b Me n u s
These options apply to the second and subsequent level sub-
menus.

F l y o u t t o Le f t
Set flyouts to always open to the left of their parents. Edge
detection will prevent them from moving off-screen.

S u b O f f s e t To p
Move the sub-menus up or down. Positive numbers shift the
menu down. Negative numbers shift the menu up.

17 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

S u b O f f s e t Le f t
Move the sub-menus left or right. Positive numbers shift the
menu right. Negative numbers shift the menu left.

Re s p o n s i v e
These options define or augment the responsive nature of
your menu.

E n a b l e Re s p o n s i v e C o n v e r s i o n
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)

St a r t Wi t h To o l b a r C l o s e d
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

18 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

collapse to show only the hamburger (≡) icon.

S h o w To g g l e Te x t
If you enable this option, the text Show Menu or Hide Menu
will appear to the left of the hamburger (≡) icon.

N o t e : Should you need to change the language of the

Toggle text, you can edit it in the AMM CSS file, using
these two rules:

.[Link]-responsive .amm-
[Link] a:before {
content: "Show Menu";
}
.[Link]-responsive .amm-
[Link] a:before {
content: "Hide Menu";
}

Tr i g g e r Ac t i o n
These options control how the menu is operated via mouse
or window scrolling.

19 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

En a b l e Mo u s e Ac t i o n
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.

Fi x e d P o s i t i o n o n P a g e S c r o l l
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.

Du ra t i o n
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.

Cu r r e n t Ma r k i n g
This box is checked by default to enable automatic current
marking (highlighting) of links in your menu. The system

20 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

looks for links in the menu that match the current page
address. When a matching link is found, it's highlighted
(made bold).

I n c l u d e U R L Pa ra m e t e r s i n Ma t c h
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.

Us e S T E Ac t i v e Ma r k i n g
Check this box to enable the Active State marking for any
Scroll to Element links in the root menu.

Acce s s i b i l i t y
Options to enhance accessibility.

A r i a 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.

21 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Pr i o r i t y La b e l
Use the Label option to set the text label for the special

St y l i n g O p t i o n s
The following options allow you to quickly style the look of
your menu.

Ro o t M e n u S t y l i n g
Style the root menu DIV.

Ro o t M e n u C o l o r D r o p - D o w n L i s t
Choose a color set from the drop-down.

Tra n s p a r e n c y
This option will set a slight amount of transparency on your
root menu, if a color other than N o n e has been selected.

Border
Sets a 1px border around your root menu.

Ro u n d e d

22 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

Rounds the corners of your root menu.

Ro o t C l a s s
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.

Ro o t L i n k s S t y l i n g
Style the root level links of your menu.

Ro o t L i n k s C o l o r D r o p - D o w n L i s t
Choose a color set from the drop-down.

Border
Sets a 1px border around your root menu links.

Ro u n d e d
Rounds the corners of your root menu links.

S T E Ac t i ve
Choose a color set from the drop down.

S u b - Me n u St y l i n g
Style your menu's sub-menus.

23 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

S u b - Me n u Co l o r D r o p - D o w n L i s t
Choose a color set from the drop-down.

Tra n s p a r e n c y
This option will set a slight amount of transparency on your
sub-menus.

Border
Sets a 1px border around your sub-menus.

Ro u n d e d
Rounds the corners of your sub-menus.

U I Co m m a n d B u t t o n s
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.

Cr e a t e Mo d e Co m m a n d B u t t o n s

OK
Build the menu

24 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

AC Ma r ke r
Open the Advanced Current Marker UI (See Below)

Ca n ce l
Close the UI without adding a menu to your page.

He l p
Open this user guide.

Mo d i f y Mo d e Co m m a n d B u t t o n s
The Modify UI adds on additional button: R e m o v e .

Re m o v e
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.

A d v a n ce d Cu r r e n t Ma r ke r
Open the Advanced Current Marker UI by clicking the AC
Marker command button.

25 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

There are four methods:

No n e : Di s a b l e a l l c u r r e n t m a r k i n g f o r t h i s m e n u
The N o n e 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.

Ma t c h t o a s p e c i f i c L i n k Te x t i n t h e m e n u

26 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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 N OT

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.

Ma t c h t o a S p e c i f i e d U R L i n t h e m e n u
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

27 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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.

Us e Fo l d e r Na m e : : L i n k Te x t Pa i r s
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 Fo l d e r N a m e : : L i n k Tex t p a i r .

28 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

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.
Su p p o r t Opt i o n s
Before making a support inquiry, please be certain to have
read the documentation that came with your product.
Please include your O r d e r N u m b e r , Dreamweaver
version, as well as your computer operating system type in
all support correspondence.

S u p p o r t Fo r u m
PVII maintains a Web Forum community. Go Direct to the
Web Forum

29 of 30 7/9/21, 4:11 PM
Adaptive Menu Magic User Guide [Link]

E- Ma i l a n d P h o n e S u p p o r t
E - M a i l : support@[Link]
P h o n e : (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.

© 2 0 1 7 P RO J E C T S E V E N D E V E LO P M E N T. A L L R I G H T S
RESERVED.

30 of 30 7/9/21, 4:11 PM