0% found this document useful (0 votes)

87 views

Pop Menu Magic 2: Al Sparber & Gerry Jacobsen PVII

project seven

Uploaded by

arin

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

87 views

Pop Menu Magic 2: Al Sparber & Gerry Jacobsen PVII

project seven

Uploaded by

arin

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 59

Pop Menu Magic 2

The best Dreamweaver menu-building system just got a whole lot better...

Pop Menu Magic 2 automates the process of building multi-level CSS-based menus. You can add as many menus
to the same page as you like, in both horizontal and vertical types. Each Pop Menu can be styled independently or
you can have some, or even all, share the same style. The options for each Pop Menu are set independently, each
with its own dedicated user interface.

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen PVII

Pop Menu Magic 2 2

Table of Contents
Pop Menu Magic 2 ............................................................................................................................................................................. 1
Installation ........................................................................................................................................................................................ 6
Installing the full version ............................................................................................................................................................... 6
Installing the upgrade version ...................................................................................................................................................... 6
Before you begin............................................................................................................................................................................... 7
Work in a Defined Dreamweaver Web Site .................................................................................................................................. 7
Pop Menu Magic 2 assets folder ................................................................................................................................................... 7
Using Pop Menu Magic 2 .................................................................................................................................................................. 8
Overview ....................................................................................................................................................................................... 8
Inserting a New Pop Menu ........................................................................................................................................................... 9
Asset Folders ............................................................................................................................................................................ 10
Modifying an Existing Pop Menu .................................................................................................................................................. 11
Managing the User Interface Items ............................................................................................................................................. 12
Mode........................................................................................................................................................................................ 12
Menu Items .............................................................................................................................................................................. 12
Add Item .................................................................................................................................................................................. 12
Add Sub .................................................................................................................................................................................... 12
Delete....................................................................................................................................................................................... 12
Up ............................................................................................................................................................................................ 12
Down........................................................................................................................................................................................ 12
Item Link Text .......................................................................................................................................................................... 13
Link Path/ Browse... ................................................................................................................................................................. 13
Image Path / Browse... ............................................................................................................................................................. 13
Menu Options .............................................................................................................................................................................. 14
Menu Type ............................................................................................................................................................................... 14
Trigger Delay ............................................................................................................................................................................ 14
Flyout to Left ............................................................................................................................................................................ 14
Sub Menu Offsets .................................................................................................................................................................... 14
Horizontal Options ................................................................................................................................................................... 15
Image Swap Options ................................................................................................................................................................ 16
Rollover Open State ................................................................................................................................................................. 17
Rollover Mark State ................................................................................................................................................................. 17
Use Current Marking ................................................................................................................................................................ 17
Include URL Parameters in Match............................................................................................................................................ 17
Animation Method................................................................................................................................................................... 18
Open Sub Menu Upward ......................................................................................................................................................... 18

PVII Pop Menu Magic 2 | Pop Menu Magic 2 2

Pop Menu Magic 2 3

Style Theme ............................................................................................................................................................................. 18

The Interface Control Buttons ..................................................................................................................................................... 19
OK ............................................................................................................................................................................................ 19
Cancel ...................................................................................................................................................................................... 19
Help .......................................................................................................................................................................................... 19
PVII Pop Menu Magic 2 Image File Naming Convention ................................................................................................................. 20
Overview ..................................................................................................................................................................................... 20
Pop Menu Magic 2 Default Naming Convention:.................................................................................................................... 20
Changing the image naming convention.................................................................................................................................. 21
PVII Pop Menu Magic 2 -Advanced Current Marker ....................................................................................................................... 22
Overview ..................................................................................................................................................................................... 22
Opening the Advanced Current Marker ...................................................................................................................................... 23
Modifying the Advanced Current Marker ................................................................................................................................... 25
Removing the Advanced Current Marker ................................................................................................................................... 26
PVII Pop Menu Magic 2 Advanced Current Marker: "None - Disable All" Option ........................................................................... 27
Overview ..................................................................................................................................................................................... 27
Opening the Advanced Current Marker ...................................................................................................................................... 27
Select the Current Marker Option .............................................................................................................................................. 28
Finished ....................................................................................................................................................................................... 28
PVII Pop Menu Magic 2 Advanced Current Marker Link Text Marking Option ............................................................................... 29
Overview ..................................................................................................................................................................................... 29
Opening the Advanced Current Marker ...................................................................................................................................... 29
Select the Current Marker Option .............................................................................................................................................. 30
Select the Link Text ...................................................................................................................................................................... 31
Finished ........................................................................................................................................................................................ 31
PVII Pop Menu Magic 2 Advanced Current Marker URL Match Option .......................................................................................... 32
Overview ..................................................................................................................................................................................... 32
Opening the Advanced Current Marker ...................................................................................................................................... 32
Select the Current Marker Option ...............................................................................................................................................33
Select the URL to Match ............................................................................................................................................................. 34
Finished ....................................................................................................................................................................................... 34
PVII Pop Menu Magic 2 Advanced Current Marker "Folder:Text Match" Option ........................................................................... 35
Overview ..................................................................................................................................................................................... 35
Opening the Advanced Current Marker ...................................................................................................................................... 35
Select the Current Marker Option .............................................................................................................................................. 36
Define the Folder Name :: Link Text Pairs ................................................................................................................................... 37
Specify the Folder Name ......................................................................................................................................................... 37

PVII Pop Menu Magic 2 | Pop Menu Magic 2 3

Pop Menu Magic 2 4

Specify the Link Text ............................................................................................................................................................... 37

Adding another Folder Name :: Link Text Pair ............................................................................................................................ 38
Using a Compound Folder Name ................................................................................................................................................ 39
Ordering the Defined Pairs ......................................................................................................................................................... 39
Deleting a Defined Pair ............................................................................................................................................................... 40
Finished ....................................................................................................................................................................................... 40
PVII Pop Menu Magic 2 -Remove Menu .......................................................................................................................................... 41
Overview ...................................................................................................................................................................................... 41
Open the Remove PVII Pop Menu Magic 2 interface ................................................................................................................... 41
What will be Removed ............................................................................................................................................................ 42
What will Not be Removed ..................................................................................................................................................... 42
The Interface Control Buttons .................................................................................................................................................... 42
Remove ................................................................................................................................................................................... 42
Cancel ..................................................................................................................................................................................... 42
Help ......................................................................................................................................................................................... 42
Questions and Answers .................................................................................................................................................................. 43
How are the Pop Menu Magic 2 CSS files and rules named? ...................................................................................................... 43
How do I use or manage Menus in different folders? ................................................................................................................ 44
Can I Revert back to a default Style Theme CSS file? .................................................................................................................. 45
How do I set font (typeface) styles for my menu? ...................................................................................................................... 46
Can I set different font (typeface) styles for my root and sub-menu items? .............................................................................. 47
Can I use Pop Menu Magic 2 on a page containing a Pop Menu Magic 1 menu? ....................................................................... 48
Can I update a Pop Menu Magic 1 menu to Pop Menu Magic 2? ............................................................................................... 48
Can I insert a menu inside an Accordion, Glide Panel, Elevator or Tab Panel widget? ............................................................... 48
I placed a menu in my footer and I have to scroll down to see the sub-menus Is there a better solution? ............................... 48
Can I edit the background images? ............................................................................................................................................. 49
How do I change the default or hover styles for my links? ......................................................................................................... 50
How do I set the width of my vertical menu? ............................................................................................................................. 50
How do I change the width of my sub-menus?........................................................................................................................... 50
Can I center the text inside my top-level links? .......................................................................................................................... 50
Can I center the text inside my sub-menu links? ........................................................................................................................ 50
Why is my PMM2 style sheet full of !important notations? ........................................................................................................ 51
Why are there text-align and line-height declarations in my style sheet? .................................................................................. 51
How do I change the appearance of the Current Marked link that highlights the page you are on? ......................................... 52
Can I style just the first or last link in a menu independently? ................................................................................................... 53
How do I style my trigger links when they are in the open state with their sub-menu showing? .............................................. 54
Can I use images for my menu items? ........................................................................................................................................ 55

PVII Pop Menu Magic 2 | Pop Menu Magic 2 4

Pop Menu Magic 2 5

My Image Swaps are not working or are showing broken images. What's wrong? ................................................................... 55
How can I prevent my auto-centered horizontal menu from jumps when the page loads? ...................................................... 56
Why does my horizontal menu wrap to 2 lines?......................................................................................................................... 56
When my sub-menus appear, there is a window-shade effect as the Reveal Down animation runs. What's wrong? .......... 56
How can I make it so that when JavaScript is disabled, my sub-menus are visible? ................................................................... 57
Do you have any accessibility tips or best practices to share? ................................................................................................... 57
Is there a place on the PVII site where I can find more PMM2 examples or tweaks? ................................................................ 57
Support and Contact info ................................................................................................................................................................ 58
PVII Knowledge Base................................................................................................................................................................... 58
Newsgroup forum communities ............................................................................................................................................. 58
RSS News Feeds ...................................................................................................................................................................... 59
Before you Contact us............................................................................................................................................................. 59
Snail mail ................................................................................................................................................................................. 59

PVII Pop Menu Magic 2 | Pop Menu Magic 2 5

Installation 6

Installation
The installation procedure depends on whether you purchased the full version or the upgrade version.

Installing the full version

Look for the extension installer file p7PMM2128.mxp in the root of the zip archive you downloaded. Double-click
the file to install the extension. Dreamweaver's Extension Manager will open and you will be prompted to
complete the installation. Restart Dreamweaver once the installation is complete.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file association issue. To remedy the problem
locate the installer file from inside a Finder window and double-click it.

Installing the upgrade version

Using the upgrade version requires that Pop Menu Magic 1 is installed. Once you install the upgrade you
will be able to use both Pop Menu Magic 1 and Pop Menu Magic 2 .

Look for the extension installer file p7PMM2128upg.mxp in the root of the zip archive you downloaded. Double-
click the file to install the extension. Dreamweaver's Extension Manager will open and you will be prompted to
complete the installation. Restart Dreamweaver once the installation is complete.

PVII Pop Menu Magic 2 | Installation 6

Before you begin 7

Before you begin

Work in a Defined Dreamweaver Web Site

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that
Dreamweaver knows how to link assets required by Pop Menu Magic 2 to your page. If you are new to
Dreamweaver or need to learn how to define a web site, please see this tutorial: Defining a Dreamweaver Web Site.

Pop Menu Magic 2 assets folder

When you create a Pop Menu Magic 2 menu, the system creates an assets folder named p7pmm at the same level
as the page that contains your menu. This folder will contain the Pop Menu Magic 2 JavaScript file and the
relevant menu style sheet(s), as well as an img sub-folder that contains the background images for each style
theme you are using.

When you publish your site, make sure you upload the entire p7pmm folder.

PVII Pop Menu Magic 2 | Before you begin 7

Using Pop Menu Magic 2 8

Using Pop Menu Magic 2

Overview
Pop Menu Magic 2 automates the process of building multi-level CSS-based menus. You can add as many menus
to the same page as you like, in both horizontal and vertical types. Each Pop Menu can be styled independently or
you can have some, or even all, share the same style. The options for each Pop Menu are set independently, each
with its own dedicated user interface.

The Pop Menu Magic 2 user interface is designed to automatically open to the correct mode based on your current
insertion point in the document. If your insertion point is inside an existing Pop Menu Magic 2 menu, the user
interface will open in the Modify mode for that particular menu. If your insertion point is not within an existing
Pop Menu Magic 2 menu, the user interface will open in the Create mode.

Dreamweaver Template Support: The system is specifically designed to be 100% Dreamweaver Template
friendly. You can insert one or more menus into a template (.dwt) page at any time. You can also insert one or
more menus into a template-based page. The system will automatically detect the template and adjust to allow
insertion into an editable region.

Current Link Marking: The system includes a built-in feature that highlights the link in the menu that matches
the current page's URL. The system sets this link to a special style class named current_ mark, and will also apply
the li_current_mark class the link's parent <li> tag. This provides a visual trail to the current page in the menu - a
"you are here" indicator. This feature can be easily turned on or off for each menu on your page directly from the
user interface. Additionally, the system includes an Advanced Current Marker system to allow you to set the
current mark for pages that do not appear as links in the menu.

Image Support: The Pop Menu Magic 2 system fully supports using images for any root or sub-level links. The
Pop Menu Magic 2system is designed to automatically handle preloading, swapping, multiple state management
and current marking. This automation requires that you follow the image file naming convention. The system
supports up to 4 different image states.

First and Last Menu Link Styling: The system automatically assigns a special CSS class to the first and last links
in the menu in order to facilitate styling that requires exception rules for these links. The pmmfirst class is
assigned to the first link (and also its <li> parent tag) in the menu and the pmmlast class is assigned to the last
link (and its <li> parent tag) in the menu.

Note: The Pop Menu Magic 2 system assigns appropriate style classes to all of the necessary elements dynamically based on the options selected. These
classes are not available in Dreamweaver Design View; you will need to preview the page in a browser (or CS 4 Live View) to see the rendered effects of
these style assignments.

The Pop Menu Magic 2 system also includes a handy Remove Menu command that can be used to quickly
remove a menu and its associated markup from your page.

Insertion

Pop Menu Magic 2 menus can be inserted anywhere on your page. Once you have established your insertion point,
click the Pop Menu icon to open the interface. Alternatively, you can choose Insert > Studio VII > Pop Menu
Magic 2 by PVII. You can insert the menu into any area of your page. The menu will automatically adapt to its
location, even when placed inside flexible DIVs or table cells. You can insert as many individual menus as you like
on your page. Each menu can be optioned independently to set different modes and features. Menus on a single
page can share the same style theme or be set to separate style themes.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 8

Using Pop Menu Magic 2 9

Inserting a New Pop Menu

-Establish the insertion point for your new menu by clicking in the area of the page where you would like it to be
created.

Note: The interface is sensitive to the insertion point. If your cursor is currently inside an existing Pop Menu component then the Modify interface
will open instead.

-Click the Pop Menu Magic 2 icon in the Common Section of Dreamweaver's Insert Bar or choose Insert
> Studio VII > Pop Menu Magic 2 by PVII.

Classic Dreamweaver Insert Bar

Dreamweaver CS4 Insert Panel

Dreamweaver CS4 Users: We highly recommend switching to Classic Workspace mode, which allows for a conventional Insert Bar across the
top of your Design View window. If you use the new CS4 workspaces, the Insert Bar becomes a vertical panel that violates Windows and OS X
interface conventions. In addition to being hard to use, the vertical Insert Bar has no support for mouse wheel scrolling making it highly unusable.
We are hoping Adobe will fix this (and other) UI issues in the next version of Dreamweaver.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 9

Using Pop Menu Magic 2 10

The Pop Menu Magic 2 user interface will open in the Create New Pop Menu mode.

You can create more than one menu on your page. Add as many as you like.

Asset Folders

When you publish your site, make sure you upload the entire p7pmm folder.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 10

Using Pop Menu Magic 2 11

Modifying an Existing Pop Menu

You can modify any of the existing Pop Menu Magic 2 menus on your page at any time.

-Click inside the menu that you wish to modify.

-Click the Pop Menu Magic 2 icon in the Common Section of Dreamweaver's Insert Bar or choose Modify
> Studio VII > Modify Pop Menu Magic 2 by PVII

The Pop Menu Magic 2 User Interface will open in the Modify Existing Pop Menu mode.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 11

Using Pop Menu Magic 2 12

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the
id of the menu being modified will also be displayed.

Menu Items

This box displays the text for each navigation link in the menu—one line for each link. Select (click) the line you
wish to act on.

Add Item

Click the Add Item button to add a new menu link. This new item will be created immediately after the selected
item, and at the same level as the selected item. The newly created menu item will initially appear with the default
description: Menu Item and the URL will simply be a hash (#) placeholder. Change these to suit your needs. The
Image Path box is always blank by default.

Add Sub

Click the Add Sub button to create a new sub-menu for the selected root link item. A new menu item will appear
directly beneath the selected menu item, indented one level. The newly created menu item will initially appear
with the default description: Menu Item and the URL will simply be a hash (#). Change these to suit your needs.
The Image Path box is always blank by default.

Delete

Click the Delete button to remove the selected menu item. If the menu item contains one or more sub-menu levels
the system will completely remove the selected menu item and all of its sub-menu levels.

Note: The interface requires at least one item to be in the menu list at all times. The system will not allow you to delete a menu item if it is the only
remaining one.

Click the Up button to move the selected menu item up in the Menu Items list. The menu item, and all of its
sub-menu level items, will be moved up one position each time the Up button is clicked. If the menu section
before the selected item is in the open state (sub-menu items showing) then the selected menu item will be moved
to the last position of the open menu section.

Down

Click the Down button to move the selected menu item down in the Menu List. The menu item, and all of its
sub-menu level items, will be moved down one position each time the Down button is clicked. If the menu
section after the selected item is in the open state (sub-menu items showing) then the selected menu item will be
moved to the first position of the open menu section.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 12

Using Pop Menu Magic 2 13

Item Link Text

The Menu Link Text box will always display the text of the currently selected line in the Menu Items list. Enter
or edit the text that you wish to display for this menu link. The box cannot be left blank.

Note: If an image has been assigned this box will be disabled (grayed out) and contain the file name of the assigned image. Removing the Image Path will
re-enable this box.

Link Path/ Browse...

Enter the path to the linked page for this menu item or use the Browse button to open the Select File to Link
dialog box. The system will automatically supply a "#" placeholder when new menu items are created, which you
should change to an actual page link before publishing.

Image Path / Browse...

Note: The Image Path box is only used if you are using images for your menu buttons. For text-based menus this box should be left empty.

Enter the path to your menu button image, or use the Browse button to open the Select Image Source dialog box.
You can change the image at any time by selecting the menu item and clicking the Browse... button. Valid image
types are: .gif, .jpg, .jpeg, and .png.

The image you select must always be the default button image. The system will handle image preloading for
rollover, down-state and current mark images based on the Image Swap Option you select. The file names of
your button images can be anything you like. However, you must follow a naming convention for the swap images.
This naming convention is also user-definable to allow easy configuration with the output of your image editor.

Image Alt Text

Enter a description (Alt Text) for the related image button. If the text on the button is "Products" then Products
would be a good choice for the description.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 13

Using Pop Menu Magic 2 14

Menu Options
These settings are applied to the current Pop Menu Magic 2 menu. Other menus on the same page can have
different options.

Menu Type

Select a menu orientation in the Menu Type selector. Your choices are Vertical or Horizontal. You can change
the Menu Type at any time by simply opening the Modify interface and selecting a different Menu Type. The
thumbnail preview image will change to show the menu type you chose.

Trigger Delay

The Pop Menu Magic 2 system includes a built-in action delay to allow for diagonal mouse movements without
accidentally closing a sub-menu. This feature makes using the menu much easier and should normally be left
activated. To disable the delay, un-check the box.

Flyout to Left

This controls the position of the pop up sub-menu. The sub-menu normally pops up to the right of the trigger link.
There are occasions where you would want the sub-menu to pop up to the left of the trigger, for example if the
menu is placed into a right sidebar. Check this box if you want the sub-menu to pop up to the left of the trigger.

Sub Menu Offsets

You can control the position of the sub-menu relative to its trigger link.

Top

This controls the alignment of the top edge of the sub-menu with the top edge of the trigger link. Enter a value of
0 (zero) to perfectly align both top edges. Enter a negative number, in pixels, to align the top edge higher than the
top of the trigger link, enter a positive number to align the top lower than the top of the trigger link.

Left

This controls the alignment of the left edge of the sub-menu with the right edge of the trigger link. Enter a value of
0 (zero) to perfectly align both edges. Enter a negative number, in pixels, to overlap the sub-menu on top of the
trigger link, enter a positive number to separate the sub-menu from the trigger link.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 14

Using Pop Menu Magic 2 15

Horizontal Options

These options are special to the operation of the Horizontal Menu type and have no effect on a Vertical Menu.

Auto Center

The Pop Menu Magic 2 system includes the ability to automatically center a horizontal menu with respect to the
page element that contains the menu. Check this box if you want the menu centered.

Note: The menu will not be displayed as centered in Dreamweaver Design View; this feature requires that the page be viewed in a browser.

1st Sub Level Align To

This controls the alignment of the first level sub-menu relative to its trigger link. The default is Left Edge.

 Left Edge of Trigger -This will align the left edge of the sub-menu to the left edge of the trigger link. This
is the default.
 Center All - This will automatically center each sub-menu beneath its trigger link.
 Center and Justify - This will automatically center each sub-menu beneath its trigger link, however, the
first sub-menu left edge will align to the left edge of its trigger link, and the last sub-menu will be aligned
to the right edge of its trigger link.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 15

Using Pop Menu Magic 2 16

Image Swap Options

The Pop Menu Magic 2 system includes robust support for using images in any of the menu links, root level or
sub-menu items. The Pop Menu Magic 2 system is designed to automatically handle all of the required image
actions; preloading, swapping and maintaining down state and even maintaining a current marker state. This
automation requires that you follow the image file name convention. The system supports up to 4 different image
states. Select the Swap Option that you would like to use:

Single Image Only

This is the default option. Choose this option if you are using just a single image and do not want any image swap
actions on any of the menu states.

Normal and Over

Choose this option if you are using two images:

 Normal image
 Over (hover) image. The over state image will also be used as the open (sub-menu showing) and current
mark states.

Normal, Over and Open Images

Choose this option if you are using three images:

 Normal image
 Over (hover) image
 Open (sub-menu showing) image. This image will also be used for the current marker state.

Normal, Over, Open and Mark

Choose this option if you are using four images:

 Normal image
 Over (hover) image
 Open (sub-menu showing) image
 Current Marker image

Note: Be sure to choose the option carefully to match the number of image states you are using. The system will pre-load the various state images based
on this selection and if any images are missing, your swaps will not work correctly.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 16

Using Pop Menu Magic 2 17

Rollover Open State

This controls the swap action taken when the menu item is in its open state. Normally, the system will not swap to
the over image on rollover if the menu item is in the open state. Check this box if you want to enable the rollover.

Rollover Mark State

This controls the swap action taken when the menu item is in its current marked state. Normally, the system will
not swap to the over image on rollover if the menu item is in the current marked state. Check this box if you want
to enable the rollover.

Use Current Marking

Check this box to enable the automatic current marking of links in the menu. This box must be checked in
order to use the Advanced Current Marker features for the menu.

Include URL Parameters in Match

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

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 17

Using Pop Menu Magic 2 18

Animation Method

The Pop Menu Magic 2 system allows you to choose the type of animation to use when opening a sub-menu:

 0-None -Choose this option if you do not wish to have any animated effects.
 1-Reveal Right - The sub-menu will reveal itself in a left to right direction.
 2-Reveal Down -The sub-menu will reveal itself in a downward direction.
 3-Combined for Horizontal Menu -A special animation that works with Horizontal menus only. The first
sub-menu level will reveal itself downward, while subsequent levels will reveal left to right.
 4-Text Slide -The sub-menu box will show instantly and the link text will slide in from the left. This is the
ideal animation when using the Open Sub Menu Upward option.

Open Sub Menu Upward

Sub-menus will normally open in a downward direction from their corresponding trigger link. Check this box if
you wish to have your sub-menus open above their corresponding trigger link. Each successive sub-menu level will
open in an upwards direction above each trigger link.

Style Theme

Pop Menu Magic 2 comes with pre-defined CSS style themes. Choose a theme that best approximates the look you
desire. This will act a starting point from which you can later make edits to the style sheet to fully customize your
menu(s). You can change to a different style type at any time without affecting the contents of your menus.

A preview of the selected Style Theme is displayed to the right of the Style Theme select list. This Preview will
change whenever you select a different Style Theme or whenever you change the Menu Type.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 18

Using Pop Menu Magic 2 19

The Interface Control Buttons

When you are done setting your desired options, click the OK button to build the menu. The system will verify
your selections and alert you to any problems that need your attention. If there are no problems, the interface will
close and a menu will be added to your page or updated—depending on whether you are in Create mode or
Modify mode. You can then preview in a browser to operate the menu and check its functionality.

Tip: To make further changes, click inside a menu and then open the Pop Menu Magic 2 interface to begin your modifications.

Cancel

Click the Cancel button to completely abort the current Pop Menu Magic 2 operation. This will close the
interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy
reference while you continue working with the Pop Menu Magic 2 interface.

PVII Pop Menu Magic 2 | Using Pop Menu Magic 2 19

PVII Pop Menu Magic 2
Image File Naming Convention
20

PVII Pop Menu Magic 2

Image File Naming Convention

Overview
The Pop Menu Magic 2 system fully supports using images for any root or sub-level links. The Pop Menu Magic 2
system is designed to automatically handle preloading, swapping, multiple state management and current
marking.

The system supports up to 4 different image states:

 Normal - the base image

 Over - appears on mouse hover
 Open - appears when the menu item's related sub-menu is open
 Mark - appears when the menu item has been current marked

The system handles the state of each image automatically based on the Image Swap option you choose in the
User Interface You do not need to use all four states. You can choose to use one-state, two-state, three-
state or four-state images. This automation requires that you follow the image file name convention. The file
names of your button images can be anything you like. However, you must follow a naming convention for the
"over", "open" and "mark" images. For example, if you name your default button image myButton.gif...

 The image you want to appear when users mouse over it would be: myButton_over.gif
 The image you would want to designate the open state would be named: myButton_overdown.gif
 The image you want to designate as the current marked state would be: myButton_down.gif.
Note: While the Swap Options can be set differently for each Pop Menu Magic 2 system on the page, the naming convention is global and will be used for
all of the Pop Menu Magic 2 systems on your page.

Pop Menu Magic 2 Default Naming Convention:

 Normal Image: myButton.gif
 Over Image: myButton_over.gif
 Open Image: myButton_overdown.gif
 Current Mark Image: myButton_down.gif

The default naming convention is designed to work with the default Fireworks (CS4) naming convention for the
over, open and mark images. This naming convention is also user-definable to allow synching with your image
editor's capabilities or your own requirements. The basic image name must be the same for all four button images,
but the appendage you use to differentiate the rollover, open and mark images can be anything you like.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 20

Image File Naming Convention
PVII Pop Menu Magic 2
Image File Naming Convention
21

Changing the image naming convention

1. Open the p7PMMscripts.js file located in the p7pmm folder. Near the top of the file you will see 3 lines (not
counting the comments):

// define the image swap file naming convention

// rollover image for any image in the normal state

var p7PMMover='_over';

// image for any trigger that has an open sub menu -no rollover
var p7PMMopen='_overdown';

// image to be used for current marker -no roll over

var p7PMMmark='_down';

2. To change the naming convention simply change the assigned text that follows the equal (=) sign in each of the
three lines.

For example, if you want to change the naming convention to use the older Fireworks naming convention ( _f2,
_f3_, _f4) the change the assignments so they look like this:

// define the image swap file naming convention

// rollover image for any image in the normal state

var p7PMMover='_f2';

// image for any trigger that has an open sub menu -no rollover
var p7PMMopen='_f3';

// image to be used for current marker -no roll over

var p7PMMmark='_f4';

3. Save and close the file.

Now the Pop Menu Magic 2 system will use this revised naming convention to locate the over, open and mark
state images. The image file names, using this customized naming convention, would look like:

 Normal Image: myButton.gif

 Over Image: myButton_f2.gif
 Open Image: myButton_f3.gif
 Mark Image: myButton_f4.gif

As you can see, any naming convention will work by managing the text assignment for each image state in the
scripts file.

Note: If you create a menu in another folder or site, and you want to use a revised naming convention, you will need to update the scripts file in
that folder.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 21

Image File Naming Convention
PVII Pop Menu Magic 2 -Advanced Current Marker 22

PVII Pop Menu Magic 2 -Advanced Current Marker

Overview
The Pop Menu Magic 2 system includes a built-in feature that applies a Current Marker to the link in the menu
that matches the current page's url. The system sets this link to a special style class named p7PMMxy
.current_mark. This provides a visual trail to the current page in the menu - a "you are here" indicator. This
system can be turned on or off by setting the "Enable Auto Current Marking" box in the user interface for each
menu on the page.

This system works automatically, without user intervention - but it does rely on matching the current page's url to
the hyperlinks contained in the menu. In most cases this will work just fine. However, when the current page is
not reflected as a link in the menu, then the current marker will not be able to find a match and no marker is
applied. Fortunately, Pop Menu Magic 2 includes the Advanced Current Marker system to allow you to handle
these exceptions so that even pages that do not appear in the menu can have a specified menu link "Current
Marked".

Note: Use the Advanced Current Marker ONLY when the page does NOT appear as a link within the menu system. In other words, the Advanced Current
Marker is designed to handle the exceptions that go beyond the capabilities of the built-in current marking feature.

The Advanced Current Marker system is designed to be 100% Dreamweaver Template friendly. It can be applied
to any template or template-based page. The system will detect the page type and process accordingly.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Advanced Current Marker 22
PVII Pop Menu Magic 2 -Advanced Current Marker 23

Opening the Advanced Current Marker

To open the interface:

-Click inside the Pop Menu Magic 2 menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Pop Menu Magic 2 html markup on the page or if you have not
clicked on the menu you wish to act on.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Advanced Current Marker 23
PVII Pop Menu Magic 2 -Advanced Current Marker 24

The Advanced Current Marker user interface will open.

The interface allows you to manage each of four options and also allows you to remove an existing Advanced
Current Marker.

To activate the Advanced Current Marking feature you simply click the radio button next to the option you wish
to use:

1. Using the None Option

2. Using the Text Link Option
3. Using the Url Match Option
4. Using the Folder/Text Option

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Advanced Current Marker 24
PVII Pop Menu Magic 2 -Advanced Current Marker 25

Modifying the Advanced Current Marker

The system also includes the ability to Modify the parameters of a page that already has one of the Advanced
Current marker options applied.

On a page that already contains an Advanced Current Marker...

-Click inside the menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

The interface will open in Modify mode.

Note: When the Advanced Current Marker interface is in Modify mode, a Remove button appears in the column of command buttons on the right edge of
the interface window.

In this example, the interface opens with the Link Text option selected. The system will detect which option is
being used on the page and set the interface accordingly.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Advanced Current Marker 25
PVII Pop Menu Magic 2 -Advanced Current Marker 26

Removing the Advanced Current Marker

The Advanced Current Marker system includes a handy Remove utility that allows you to quickly remove an
existing Advanced Current Marker from any page. If the system detects an Advanced Current Marker on your
page, it will open in Modify mode - in which case, a Remove button will be present below the OK button.

-Click the Remove button.

The system will completely remove the Advanced Current Marker settings from your page.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Advanced Current Marker 26
PVII Pop Menu Magic 2 Advanced Current Marker:
"None - Disable All" Option
27

PVII Pop Menu Magic 2 Advanced Current Marker:

"None - Disable All" Option

Overview
The None - Disable All 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.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Pop Menu Magic 2 menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Pop Menu Magic 2 html markup on the page or if you have not
clicked inside the menu you wish to act on.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker: 27
"None - Disable All" Option
PVII Pop Menu Magic 2 Advanced Current Marker:
"None - Disable All" Option
28

The Advanced Current Marker user interface will open.

The interface has four options from which to choose. The radio button to the left of each option determines which
option is currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the first radio button to select the None -Disable All Current Marking option.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the menu now.

Note: If your preferences are set to Preview using temporary file , this feature will not work locally. To preview locally, turn off the Preview using
temporary file option in Dreamweaver Preferences.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker: 28
"None - Disable All" Option
PVII Pop Menu Magic 2 Advanced Current Marker
Link Text Marking Option
29

PVII Pop Menu Magic 2 Advanced Current Marker

Link Text Marking Option

Overview
The Link Text option allows you to select the text of any one of the existing links in the Pop Menu Magic 2 system
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, current_mark, to the menu link and will also apply
the li_current_mark class to the link's parent <li> tag.

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.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Pop Menu Magic 2 menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Pop Menu Magic 2 html markup on the page or if you have not
clicked on the menu you wish to act on.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 29
Link Text Marking Option
PVII Pop Menu Magic 2 Advanced Current Marker
Link Text Marking Option
30

The Advanced Current Marker user interface will open.

The interface has four options from which to choose. The radio button to the left of each option determines which
option is currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the second radio button to select the Link Text option.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 30
Link Text Marking Option
PVII Pop Menu Magic 2 Advanced Current Marker
Link Text Marking Option
31

Select the Link Text

The Link Text option includes a drop down listing of all of the links in the menu.

For this example, let's assume that you want to highlight the root menu link that contains "Page Three" as its text.

-Select Page Three from the drop down list.

This tells the system to look for the item in the menu that contains Page Three as its text. When it finds the link it
will apply the current marker style class to it.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the menu now.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 31
Link Text Marking Option
PVII Pop Menu Magic 2 Advanced Current Marker
URL Match Option
32

PVII Pop Menu Magic 2 Advanced Current Marker

URL Match Option

Overview
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 2 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, current_mark, to the
menu link and will also apply the li_current_mark class to the link's parent <li> tag.

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.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Pop Menu Magic 2 menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Pop Menu Magic 2 html markup on the page or if you have not
clicked on the menu you wish to act on.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 32
URL Match Option
PVII Pop Menu Magic 2 Advanced Current Marker
URL Match Option
33

The Advanced Current Marker user interface will open.

The interface has four options from which to choose. The radio button to the left of each option determines which
option is currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the third radio button to select the URL Match option.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 33
URL Match Option
PVII Pop Menu Magic 2 Advanced Current Marker
URL Match Option
34

Select the URL to Match

The URL Match option includes a drop down listing of the link value (href) of the all of the links in the menu.

For this example, let's assume that you have a page that pertains to the "Products" section of your site, but this
page is not represented as an item in the menu. Your products section is represented in the menu with a link
(href) of "page_three.htm".

-Select page_three.htm in the listing.

This tells the system to look for the link value (href) in the menu that contains page_three.htm. When it finds
the link it will apply the current marker style class to it.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the menu now.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 34
URL Match Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
35

PVII Pop Menu Magic 2 Advanced Current Marker

"Folder:Text Match" Option

Overview
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, current_mark, 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.

Opening the Advanced Current Marker

To open the interface:

-Click inside the Pop Menu Magic 2 menu that you wish to act on.

-Choose Commands > Studio VII > Pop Menu Magic 2 by PVII > Advanced Current Marker...

Note: The Advanced Current Marker option will be unavailable (grayed out) if there is no Pop Menu Magic 2 html markup on the page or if you have not
clicked on the menu you wish to act on.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 35
"Folder:Text Match" Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
36

The Advanced Current Marker user interface will open.

The interface has four options from which to choose. The radio button to the left of each option determines which
option is currently active. The default setting is always the second option.

Select the Current Marker Option

-Click on the fourth radio button to select the Folder Name :: Link Text option.

The interface allows you to add as many Folder Name :: Link Text pairs as you like. The first pair is always pre-
defined and ready for editing.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 36
"Folder:Text Match" Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
37

Define the Folder Name :: Link Text Pairs

This example will work with a menu system that resembles the structure of the menu on projectseven.com. There
is a single Extensions link in the root menu of all interior pages, but there are quite a few pages (close to one
hundred) that are related to Extensions and stored in a folder named extensions. Naturally, all of these pages
do not appear in the menu. A Folder Name :: Link Text rule can be defined to apply the current marker to the
Extensions link for any page that contains "extensions" in the page's URL.

Specify the Folder Name

The folder name is case sensitive and should match the actual folder name as used in your site.

-Enter the folder name, extensions, into the If Url contains this Folder Name box.

Specify the Link Text

The Mark this Link Text list is an alphabetized listing of all of the links in the menu.

-Select the Extensions link text.

The interface now reflects your changes. The first Folder Name :: Link Text pair is defined.

The system will apply the current marker to the Extensions menu item whenever the page contains the
extensions folder in its address (URL).

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 37
"Folder:Text Match" Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
38

Adding another Folder Name :: Link Text Pair

The site contains many pages that relate to the Products section but are not represented as links in the menu. To
handle these pages you can add another Folder Name :: Link Text pair.

-Click the Add button. A new Folder Name :: Link Text line item is created in the interface. The values are preset
to default values, ready for editing.

-Enter the folder name, products, into the If Url contains this Folder Name box.

-Select the Products link text in the Mark this Link Text drop down.

The interface now reflects your changes. Two Folder Name :: Link Text pairs are defined.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 38
"Folder:Text Match" Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
39

Using a Compound Folder Name

The site also contains sub-folders in the products area. You can define a compound folder name to allow a set of
pages to current mark a more specific link.

-Click the Add button.

A new Folder Name :: Link Text line item is created in the interface.

-Enter the folder name, products/menusystems, into the If Url contains this Folder Name box.

This will instruct the system to apply the current mark to the Menu Systems menu item whenever the page
contains products/menusystems in its url.

Ordering the Defined Pairs

The system will apply the current mark to the first match it finds. It will search in the same order as the pairs are
listed in the interface. In this case, it will always find the products match before it finds the compound
products/menusystems match - since the page url contains the word products and the products pair is listed
before the products/menusystems pair.

-With the products/menusystems pair selected, click the Up button.

The system moves the selected item up one line. Now the search for the compound folder name will be made
before the search for the products folder name.

You can move any selected line Up or Down. Each time the button is clicked the selected item will move one line.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 39
"Folder:Text Match" Option
PVII Pop Menu Magic 2 Advanced Current Marker
"Folder:Text Match" Option
40

Deleting a Defined Pair

Although this is not performed in this example, you can delete an existing defined Folder Name :: Link Text pair at
any time. Select the Folder Name :: Link Text pair you wish to delete and simply click the Delete button.

Finished
-Click the OK button to apply the selected Advanced Current Marker to the current page.

-You can preview and test the menu now.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 Advanced Current Marker 40
"Folder:Text Match" Option
PVII Pop Menu Magic 2 -Remove Menu 41

PVII Pop Menu Magic 2 -Remove Menu

Overview
The Pop Menu Magic 2 system includes a Remove feature that allows you to quickly remove an existing Pop Menu
Magic 2 menu from your page. This feature allows for easy removal when simply prototyping pages or when a total
redesign is necessary.

Open the Remove PVII Pop Menu Magic 2 interface

-Open a page that contains one or more Pop Menu Magic 2 menus.

-Choose Commands > Studio VII > Remove Pop Menu Magic 2... to open the Remove interface.

The Remove option will be unavailable (grayed out) in the menu if there is no Pop Menu Magic 2 menu on the page.

The Remove Pop Menu Magic 2 interface will open.

The interface will provide a listing of all of the Pop Menu Magic 2 menus on your page. The list will display the ID
of each menu.

-Select the menu that you wish to remove from the listing. You can only remove one menu at a time.

Tip: If you are unsure about which menu relates to which ID, click the Cancel button and switch to Code View. In Code View, locate all IDs that begin with
p7PMM. The opening DIV tag for a Pop Menu Magic 2 menu looks like this: <div id="p7PMM_1" class="p7PMM01">

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Remove Menu 41
PVII Pop Menu Magic 2 -Remove Menu 42

What will be Removed

The system will completely remove the html markup for the selected menu from your page. If there are other Pop
Menu Magic 2 menus on the page they will not be affected. The system will also remove the link to the relevant
CSS file if no other menu on the page is using the same style theme and Menu Type.

If there are no remaining Pop Menu Magic 2 menus on your page, the system will also remove the link to the Pop
Menu JavaScript file.

What will Not be Removed

The system will not remove the p7PMM folder, which contains the menu-related assets (images, JavaScript file,
and CSS files). This ensures that you will not lose any assets you may have modified and any other pages that
depend on those modified assets will continue to look and behave as expected.

The Interface Control Buttons

Remove

Click the Remove button. The selected Pop Menu Magic 2 menu will be removed from the page

Cancel

Click the Cancel button to completely abort the current Remove Pop Menu Magic 2 operation. This will close the
interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy
reference while you continue working with the Pop Menu Magic 2 interface.

PVII Pop Menu Magic 2 | PVII Pop Menu Magic 2 -Remove Menu 42
Questions and Answers 43

Questions and Answers

The following questions and answers should prove helpful as you build and manage your menus.

How are the Pop Menu Magic 2 CSS files and rules named?
The CSS files follow a naming convention based on the Style Theme you have chosen. Here is a reference list for
you:

 01-Multicolor | Horizontal: p7PMMh01.css | Vertical: p7PMMv01.css

The selector names inside each CSS file are all prefaced with the class name assigned to the root menu DIV. This
class name matches the name of the CSS file used. Here is a reference list of the class name selectors:

 01-Multicolor | Horizontal: .p7PMMh01 | Vertical: .p7PMMv01

As we discuss CSS style editing from this point on, we will refer to style rule names (selectors) as beginning with
.p7PMMxy where x is the orientation delimiter (v for vertical or h for horizontal) and y is the style theme number
(01 or 05, for example)

PVII Pop Menu Magic 2 | Questions and Answers 43

Questions and Answers 44

How do I use or manage menus in different folders?

When you create a menu, the system writes a folder named p7pmm and a Fireworks folder in the folder that
contains the page you are working on and uses that folder to store style sheets, images, and scripts. This allows for
easy and safe prototyping. If you create a menu on page1.htm, in a folder named tutorials, and edit the CSS for that
menu, your changes are restricted to that folder. Make another page in that folder and create a menu using the
same Style Theme and it will use the same style sheet you edited while working on page1. If you create a menu
on a page in a new folder, the system will create new p7pmm and Fireworks folders inside that folder and
populate it with default style sheets, scripts, and images. This allows you to test and prototype with complete
freedom - without affecting finalized pages in other folders.

There may, however, be times when you want menus in different folders to use the same style sheets. To do that,
create your menus first. Then decide which p7pmm assets folder you want to use for all your pages. You'll need to
set the paths for all Pop Menu Magic 2 CSS files, and the JavaScript file, to point to the p7pmm assets folder
you want to use. For a page with both a horizontal and vertical Topaz menu, the CSS and script links look like this:

<script type="text/javascript" src="p7pmm/p7PMMscripts.js"></script>

You can change the path to CSS or script files visually in Dreamweaver by displaying Head Content in a toolbar at
the top of your design window. To turn this feature on, choose View > Head Content.

Click the appropriate icon and your Property Inspector will change to reflect your choice, easily enabling you to
browse to the location of the assets folder you want to use.

PVII Pop Menu Magic 2 | Questions and Answers 44

Questions and Answers 45

Can I Revert back to a default Style Theme CSS file?

Should you ever make a large error and need to revert back to a default and working CSS file, do this:

1. Delete the bad CSS file from your p7pmm folder

2. Open a page in that folder that contains a menu that uses that bad style sheet. Your menu will appear
unstyled. Don't worry, that's expected, given the circumstances
3. Place your cursor inside the menu
4. Open the Pop Menu Magic 2 UI in Modify Mode
5. Make no changes in the UI - simply click the OK button
6. The system will create a new version of the appropriate CSS file

Depending on your DW version, you might not see the changes at first. If that be the case, save and close the file,
then re-open it.

PVII Pop Menu Magic 2 | Questions and Answers 45

Questions and Answers 46

How do I set font (typeface) styles for my menu?

If you'd like to edit the font styles for your menu, open Dreamweaver's CSS Styles panel and locate the .p7PMMxy
rule in your menu style sheet(s) (where xy corresponds to the Style Theme and orientation of your menu). You'll
find the following 2 declarations in the rule:

font-family: Arial, Helvetica, sans-serif;

font-size: inherit;

Change them to suit your needs.

Tip: font-size: inherit simply means that the menu font-size will be inherited from the parent elements on your page. If you place the menu inside a container
that has a font-size set, the menu will inherit that value.

PVII Pop Menu Magic 2 | Questions and Answers 46

Questions and Answers 47

Can I set different font (typeface) styles for my root and sub-menu
items?
Yes. You would use this rule for the top-level:

.p7PMMxy {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

And this rule for the sub-menus:

.p7PMMxy ul ul {
font-family: "Courier New", Courier, monospace;
font-size: .8em;
}

Change values to suit.

PVII Pop Menu Magic 2 | Questions and Answers 47

Questions and Answers 48

Can I use Pop Menu Magic 2 on a page containing a Pop Menu Magic 1
menu?
Yes. Both menu systems can exist on the same page.

Can I update a Pop Menu Magic 1 menu to Pop Menu Magic 2?

No. The markup for the 2 products is different. You may continue to use Pop Menu Magic 1 to manage your
existing menus or you may remove the Pop Menu Magic 1 menu on your page and insert a Pop Menu Magic 2
menu in its place.

Can I insert a menu inside an Accordion, Glide Panel, Elevator or Tab

Panel widget?
Yes. You can insert one or more menus inside the content panels of an Accordion Panel Magic, Glide Panel Magic ,
Elevator Panel Magic, or Tab Panel Magic widget.

I placed a menu in my footer and I have to scroll down to see the sub-
menus. Is there a better solution?
When placing a menu in a footer (or anywhere toward the bottom of your page) it is usually best to use a
horizontal menu with the Open Sub Menu Upward option selected.

PVII Pop Menu Magic 2 | Questions and Answers 48

Questions and Answers 49

Can I edit the background images?

Yes. When you create a menu, the system will also create a Fireworks folder containing the editable background
images for your menu. Fireworks is the default web image editor for all Adobe® Creative Suite products.

Tip: We suggest that you do not change the size of these images unless you really know what you are doing.

Once you complete your edits, export your images back to the relevant p7pmm/img folder to overwrite the
originals. Use these export settings:

Note: The File name box is irrelevant since you are exporting slices.

PVII Pop Menu Magic 2 | Questions and Answers 49

Questions and Answers 50

How do I change the default or hover styles for my links?

Locate the following rules in your relevant PMM2 style sheet ...

This rule styles the default link state:

.p7PMMxy a

This rule styles the hover state:

.p7PMMxy a:hover

Change properties and values to suit.

How do I set the width of my vertical menu?

Vertical PMM2 menus are designed to conform to the width of the container in which they are placed—the width
is set to auto. Only the sub-menus have a width defined. If, however, there is a need to constrain the root menu
to a specific width, use the .p7PMMxy rule (it will be the first rule in your menu style sheet).

How do I change the width of my sub-menus?

Sub-menu width is set on the .p7PMMxy ul ul CSS rule. The width of your sub-menus must be set to a fixed
value—it cannot be auto.

Can I center the text inside my top-level links?

Yes. Open your CSS panel and locate the following rule: .p7PMMxy a

Inside that rule you will find a text-align property set to left. Change the value to center.

Can I center the text inside my sub-menu links?

Yes. Open your CSS panel and locate the following rule: .p7PMMxy ul ul a

Inside that rule you will find a text-align property set to left. Change the value to center.

PVII Pop Menu Magic 2 | Questions and Answers 50

Questions and Answers 51

Why is my PMM2 style sheet full of !important notations?

This is done to prevent style conflicts with your existing page styles. Color and background-color values should
retain the !important notation—do not remove them.

Why are there text-align and line-height declarations in my style sheet?

Those are there to prevent conflicts with your existing page styles and also as workarounds to bugs in Internet
Explorer versions earlier than 8.0.

PVII Pop Menu Magic 2 | Questions and Answers 51

Questions and Answers 52

How do I change the appearance of the Current Marked link that

highlights the page you are on?
Locate the following rules in your relevant Pop Menu Magic 2 style sheet:

This rule styles the default Current Marked link state and appears in all PMM2 style sheets:

.p7PMMxy .current_mark

This rule styles the default Current Marked link state for your sub -menus (if this rule does not
exist in your style sheet, you can create it):

.p7PMMxy ul ul .current_mark

This rule styles the hover state for the Current Marked link (if t his rule does not exist in your
style sheet, you can create it):

.p7PMMxy .current_mark:hover

This rule styles the hover state for the Current Marked link in your sub -menus (if this rule does
not exist in your style sheet, you can create it):

.p7PMMxy ul ul .current_mark:hover

Change properties and values to suit.

PVII Pop Menu Magic 2 | Questions and Answers 52

Questions and Answers 53

Can I style just the first or last link in a menu independently?

Yes. The PMM2 script dynamically assigns special classes to the first and last <li> elements and the first and last
<a> elements in your menu, allowing you to set exceptions for these elements. These classes are included with
Style Themes that use the exception method.

The first and last classes for the <li> element:

.p7PMMxy ul li.pmmfirst
.p7PMMxy ul li.pmmlast

The first and last classes for the <a> element:

.p7PMMxy ul a.pmmfirst
.p7PMMxy ul a.pmmlast

These classes are useful if, for instance, you want to set a left border on all <li> elements
except for the first one. To do that you would use the following rule to set a left bord er on all
<li> items:

.p7PMMxy ul li {
border-left: 1px solid #000;
}

Then use this rule to create an exception for the first <li> item:

.p7PMMxy ul li.pmmfirst {
border-left: 0;
}

You can also make different exception rules for your sub -menus by creating one or more of
these selectors:

 .p7PMMxy ul ul li.pmmlast
 .p7PMMxy ul ul li.pmmfirst
 .p7PMMxy ul ul a.pmmlast
 .p7PMMxy ul ul a.pmmfirst

PVII Pop Menu Magic 2 | Questions and Answers 53

Questions and Answers 54

How do I style my trigger links when they are in the open state with
their sub-menu showing?
The open state trigger link rules depend on whether your menus are default or whether you have set your sub-
menus to open upwards and/or flyouts to open to the left. Here are the relevant rules:

 .p7PMMxy a.trig_open (default)

 .p7PMMxy a.trig_open_up (menu set to open upwards)
 .p7PMMxy a.trig_open_left (menu flyouts set to open to the left)
You can also use (or create, if necessary) additional rules to target only your sub-menu triggers:

 .p7PMMxy ul ul a.trig_open (default)

 .p7PMMxy ul ul a.trig_open_up (menu set to open upwards)
 .p7PMMxy ul ul a.trig_open_left (menu flyouts set to open to the left)

Note: There are also .p7PMMxy a.trig_closed rules. These should generally not be edited as they exist to carry the directional arrow images that
indicate a sub-menu is available.

PVII Pop Menu Magic 2 | Questions and Answers 54

Questions and Answers 55

Can I use images for my menu items?

Pop Menu Magic supports multi-state image-based menus. Images can be used for top-level menu items, sub-
menu items, or both. You can even make some links images and others text. PMM2 comes with a special style
theme that you should use when deploying images for the root (top-level) section of your menu: 10-Image-Based
(for Vertical or Horizontal menus).

The system will pre-load the various state images based on the selection you make from the Image Swap Options
list so be sure to make all the images necessary and in accordance with the image naming convention.

Note: The Image Swap Option applies to all images used in a particular menu. While different menus on a page can use different options, all
links in a specific menu are governed by the option you select for that specific menu.

Using images for the top-level of a horizontal menu allows you to accommodate designs that must fill up an area
to the pixel.

Tip: If you use an image (or images) in your sub-menus, make sure the images are the same (or lesser) width as your sub-menus.

Image-based examples

We've prepared some examples of image-based links that you might find informative.

See image-based Examples...

My Image Swaps are not working or are showing broken images. What's
wrong?
Make sure you are using the correct image naming convention and all required images are in the same folder—and
that you have set the appropriate Image Swap Options in the Pop Menu Magic 2 interface.

PVII Pop Menu Magic 2 | Questions and Answers 55

Questions and Answers 56

How can I prevent my auto-centered horizontal menu from jumps when

the page loads?
The auto-centering function runs when the page loads, so if your page is large you might see the menu in its
natural position for a second and then it will jump to the center. To prevent this, you can initialize the PMM2
scripts at the end of your page markup. To do so, add this script block on a new line just before your page's closing
</body> tag:

Why does my horizontal menu wrap to 2 lines?

Horizontal menus will wrap to 2 or more lines if the root menu items are wider than the DIV or table in which the
menu has been placed. Your choices are to make the link text more concise (shorter), reduce the number of root
links, make the text size smaller, or to use a vertical menu instead.

When my sub-menus appear, there is a window-shade effect as the Reveal

Down animation runs. What's wrong?
That is an IE7 (and under) rendering anomaly that happens when you edit a style theme so that the link
background color is different than the background color on its parent LI or UL. Simply change your colors so that
they match.

PVII Pop Menu Magic 2 | Questions and Answers 56

Questions and Answers 57

How can I make it so that when JavaScript is disabled, my sub-menus are

visible?
Pop Menu Magic sub-menus are hidden by default. Our goal is to hide the sub-menus and make it so that they are
only revealed to people who can point at them with a mouse (search engine spiders can still read them). We advise
you to view the Accessibility sample site (linked to in the next answer), but if you really want to make your sub-
menus visible to users with script disabled, here's how:

For either a vertical or horizontal menu, locate this rule in your menu style sheet: .p7PMMxy ul div

Remove the display:block declaration and add a visibility declaration:

.p7PMMxy ul div {visibility: visible;}

Your sub-menus will now be visible when script is disabled. They will also be visible in Dreamweaver Design View.

Do you have any accessibility tips or best practices to share?

Yes. Accessibility is best achieved through a site-wide plan that encompasses many different aspects. We've
prepared a mini sample site that demonstrates our vision of how to integrate a PMM2 menu into an accessible web
site. See Accessible Sample Site...

Is there a place on the PVII site where I can find more PMM2 examples
or tweaks?
Yes. We have a special Tweaks and Inspiration folder: Go to PMM2 Tweaks and Inspiration...

PVII Pop Menu Magic 2 | Questions and Answers 57

Support and Contact info 58

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the business.

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and
techniques relating to our products, as well as to general web development issues..

Open the Knowledge Base | View the 10 Most Recent Additions

Newsgroup forum communities

The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a day. Choose from
the following newsgroups:

1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup

Note: If you have trouble linking directly to news servers, use your default newsreader's program options to set up a new account and point it at the
following server:

forums.projectseven.com

Setting up a new newsgroup account in Outlook Express

Setting up a new newsgroup account in Mozilla Thunderbird

Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to learn how to
add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you will not find
our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.

PVII Pop Menu Magic 2 | Support and Contact info 58

Support and Contact info 59

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure how
to subscribe, please check this page:

PVII RSS Info

Before you Contact us

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

E-Mail:
[email protected]

Phones:
330-650-3675
336-374-4611