PVII Pop Menu Magic

User Guide Home :

creating a new PVII Pop Menu Magic menu

Before we begin

Pop Menu Magic menus can be inserted inside CSS-Positioned DIVs, Dreamweaver Layers, or even inside table cells. The menu will be created wherever your cursor is located - so be sure that your cursor is inside the page element in which you want the menu to be inserted. This element should be an appropriate container for the menu. That is, a vertical menu should be inserted into an element that has enough height to accommodate it and a horizontal menu should be inserted into an element that is wide enough to fit all of the top-level (root) links.

If you need to change your insertion point, click Cancel now to close the Pop Menu Magic interface, then click inside a more appropriate page element.

Open the PVII Pop Menu Magic interface

-Click the Pop Menu Magic icon in the Common category of the Insert Toolbar.

The PopMenu Magic toolbar icon

Alternatively, you can use the main Dreamweaver menu by choosing:
Insert > Studio VII > Pop Menu Magic by PVII...

The Insert PVII Pop Menu Magic interface will open:

The PopMenu Magic interface

Choose the Menu Type

-Select a menu orientation in the Menu Type selector. Your choices are Vertical or Horizontal.

Choosing a Menu Type

The thumbnail preview image will change to show the menu type you chose.

Choose the Menu Style

-Select a menu style in the Menu Style selector.

Choosing a menu style

There are 13 pre-defined styles to choose from. When you select a style, the preview image to the right will change to reflect your choice. For this example, we'll choose a Vertical menu type and the Tee Border style.

The preview image for selected style

Set the sub-menu Position (Optional)

The system allows you to control how much your sub-menus offset and overlap their parent (trigger) links.

Setting the sub menu position

These options are pre-set to provide to optimal defaults, which you can change.

If you want neither a horizontal overlap nor a vertical offset, enter 0 (zero) in both boxes.

Note: Do not enter a percent (%) sign next to your offset and overlap values - just enter either a positive or a negative number.

% Vertical Offset

Aligns the top edge of your sub-menu relative to the top edge of its parent trigger link.

Negative numbers raise the position, positive numbers lower the position, and zero sets alignment flush.

% Horizontal Overlap

Aligns the left edge of your sub-menu relative to the right edge of its parent trigger link.

Positive numbers move position left (overlapping the parent), and zero sets alignment flush. Do not use negative numbers because they will push your sub-menu away from its parent, creating a gap.

Note: Offset and Overlap apply to all sub-menu levels in a Vertical menu; but only to second (and subsequent) sub-menu levels in Horizontal menus.

Sub-Menu Animation (Optional)

The system allows you to turn the sub-menu animation effect On or Off. The default setting is On.

Controlling the sub menu animation

Un-check this box to turn the animation effect Off and sub-menus will appear instantly. Check this box to turn the animation effect On and sub-menus will appear to grow out of their parent links.

Note: The animation effect is seen only in those browsers that are robust enough to run the animation smoothly - such as IE6, Mozilla, Safari, and Firefox. Animation is always disabled for IE5.x (Mac and Windows).

Finishing Up

-Once you have set your options, click the OK button to add the new menu to your page.

Click the OK button

The system will add the html markup for the menu at your cursor location (insertion point). The appropriate Style Sheet and JavaScript files will automatically be linked to your page.

Note: Vertical menus will render fully expanded in Dreamweaver Design View, while only the top-level links in horizontal menus will be visible.

-You can now preview and test the menu (F12).

The TeeBorder style page preview

About the Pop Menu Files

When your menu was created, the system also created a folder named p7pm in the same folder that your page is in. The p7pm folder contains the Pop Menu Magic JavaScript file and related CSS (style sheet) files. The system also created an img folder inside the p7pm folder. The img folder contains an assortment of different arrow images and (if applicable) background images related to the particular menu style you are using.

Note: The system will always create the p7pm folder in the same folder as your current page. This allows you to create different Pop Menu Magic menus, within the same site, without sharing any of the menu assets.

Next: Home