Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Buy Now ($95) | Synergy Home | Synergy User Guide | DMM Style Guide

Drop Menu Magic (DMM) User GuideFrom PVII: the leader in responsive Dreamweaver tools

Drop Menu Magic is one of the only automatically responsive menu systems for Dreamweaver. Of curse, we make the other ones, too.

PVII Drop Menu Magic (DMM)

From PVII, the leader in responsive tools for Dreamweaver, comes a ground-breaking responsive drop-down menu system.

One site, one design, all devices

In a normal browser window, menu items are horizontally arranged and each can include a single horizontal drop-down sub-menu choreographed to make its entrance with your choice of several optional animations.

Normal Mode

When you make your window skinny, or when you view your page in a smartphone, the same menu magically transforms into a perfectly configured accordion. A toolbar also appears—giving smartphone users the ability to easily hide or show the menu.

Responsive Mode

Automation

The Drop Menu Magic system allows you to manage your menu items and options through a dedicated and automated interface. It also allows you to add additional menus to your page.

Menu Modes

Menus can be optioned in 2 modes:

Default Drop-Down

In this mode, the root items are horizontally displayed. Sub-menus drop-down and are also displayed horizontally.

Vertical Accordion

This mode is perfect for deployment in a sidebar. The menu root links are vertically stacked. Sub-menus are revealed by sliding the root links up or down to reveal them. This mode is similar to what all DMM menus look like in smartphones—but with slightly different styling and without a hide/show toolbar.

Vertical Mode

Vertical Dropdown

This mode is perfect for situations where you have a lot of sub menu links. The root items are horizontally displayed just as in the default Drop-Down mode. The sub-menus drop-down vertically and pop over the page content.

All menu modes are responsive by default and will display as accordions on smatphones and in narrow windows.

Features

Responsive and Mobile Ready

The Drop Menu Magic is designed to automatically respond to the size of the browser window and the device being used.

Menu Modes

Horizontal drop-down (default), vertical accordion-style, or vertical dropdown menu.

Create or Modify

The user interface has 2 main modes, Create and Modify, and will automatically open in the correct mode based on your current insertion point in the document:

User Definable Trigger Action

Drop Menu Magic menus can be set to work onClick or onClick and Mouse-Over (default). These actions can be set individually for each Drop Menu Magic menu on the page.

Touch Device and Smart Phone Support

The Drop Menu Magic system is designed to work perfectly on all touch-enabled devices, including iPhone, iPad, Kindle, Android, and other smartphones or tablets.

Fully Integrated Scroll to Element Support

Any menu link can be assigned Scroll to Element functionality, clicking the link will smoothly scroll to ID'd elements anywhere on your page.

Selectable Alignment Options

The Drop Menu Magic user interface allows you to easily select the alignment for the menu:

Dreamweaver Template Support

DMM is 100% Dreamweaver Template compatible. 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 and Auto Sub-Menu Opening

The system includes an optional feature that looks for links in the menu that match the current page address. When a match is found, the link is highlighted. If the matching link is a root item that has a sub-menu, the sub-menu will open. If the matching link is inside a sub-menu, the sub-menu will open. The system assigns a special style class named current_ mark to the matching link and its parent root item, if applicable. Current Marking can be turned on or off, for each menu on your page, from the user interface.

Drop Menu Magic also includes an Advanced Current Marker system that allows you to handle exceptions—so that even pages that do not appear as links in the menu can be highlighted.

Image Support

The system supports using images for the menu items and automatically handles pre-loading, swapping, multiple state management and current marking. This automation requires that you follow the image file name convention. The system supports up to 3 different image states.

Automated Removal

A handy Remove command is included that can be used to quickly and thoroughly remove any DMM menu from your page.

Inserting a New DMM Menu

The menu will adapt to the width of the element in which it was inserted—whether that width is fixed or flexible. In the absence of a containing element, the menu will stretch the full available width of your browser window. You can insert as many individual menus as you like on a page. Each one can be configured independently to set different options and features.

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

-Click the DMM icon DMM Icon in the PVII Section of Dreamweaver's Insert Bar or choose Insert > Studio VII > Drop Menu Magic by PVII.

Classic Dreamweaver Insert Bar

The Insert Bar

Dreamweaver Insert Panel

CS4, CS5 or CS6 Insert Panel

The DMM user interface will open in the Create New Drop Menu Magic mode.

The Panel Interface

Configure your menu, set your options, then click OK to build the menu at your insertion point. You can create as many menus as you like on your page.

Tip: When you insert a DMM menu, only the root menu items will be visible in Dreamweaver Design View. The menu's functionality can be tested by previewing in a browser or by using Live View.

Asset Folders

When you create a menu, the system creates an assets folder named p7dmm at the same level as the page that contains your menu. This folder will contain a JavaScript file, relevant CSS files, as well as an img sub-folder that contains arrow background images used by the CSS.

DMM file folder

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

Modifying an Existing DMM Menu

You can modify any menu on your page at any time.

-Click inside the menu that you wish to modify.

-Click the DMM icon The icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel—or choose Modify > Studio VII > Modify Drop Menu Magic by PVII

Note: If you use a Macintosh computer, Apple bugs will sometimes cause the Modify menu to be inactive (grayed out). If this happens to you, use the icon to launch the interface. You can also launch the interface from the Insert menu. The system will open the interface in the appropriate mode whether you use the Insert Menu, Insert Panel/Bar or the Modify menu.

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

The Modify User Interface

Configure your menu items and options and click OK.

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.

Note: DMM supports a single sub-menu level. If you have a sub-menu item selected, the Add Sub button will be grayed out.

Delete Item

Click the Delete button to remove the selected menu item. If the menu item contains a sub-menu level the system will completely remove the selected menu item and its sub-menu level.

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.

Up

Click the Up button to move the selected menu item up in the Menu Items list. The menu item, and its sub-menu items, will be moved up one position each time the 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 its sub-menu items, will be moved down one position each time the 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.

Item Link Text

The Item Link Text box displays the text of the currently selected line in the Menu Items list. The text can be edited at any time. The box cannot be left blank.

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

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 "#" link 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 image or use the Browse button to open a Select Image Source dialog box. You can change the image at any time by selecting the menu item in the Menu Items list and clicking the "Browse..." button. Valid image types are limited to the .gif, .jpg, and .png file types.

The image you select must always be the default state image. The system will automatically handle image pre-loading. Images for additional states (over, and down), depending on the Image Swap Option you select, must be stored in the same folder as your default image. The system will automatically find them. Default state image file names can be any valid name. You must, however, follow a naming convention for the additional state images. If your default image for a link is home.jpg, you would follow this convention:

Image Alt Text

Enter a description for the related image in the Alt Text box. If the image is a picture of hats, then Hats would be a good choice for the text to use.

Scroll to Element

Check this box to enable the automated Scroll to Element support, which will smoothly scroll to ID'd elements anywhere on your page.

Element ID

Enter the ID of the target element... the element to which you would like to scroll to when the link is clicked. The ID you enter into the box will become the HREF attribute of your link.

Top Offset Adjustment

Normally the scroll action will place the target page element at the top of the browser window. You can optionally choose to have the system adjust this position in one of two ways:

Pixel Top Offset

Enter a pixel value, which translates to a fixed space between the top of your target element and the top of the browser window/viewport. For example, this will allow you to scroll to specific offset positions in relation to the page element.

Height of ID Offset

This is useful if you are using a fixed-position element at the top of your page. Simply enter the ID of the element and the system will adjust the top position by the rendered height of the element. This allows positioning directly underneath a fixed position nav bar even if the nav bar changes height with browser window size changes.

Options

These settings are applied to the current menu. Other menus on the same page can have different options.

Menu Mode

Default Drop-Down

Select this option to display the menu in the default horizontal fashion. The root menu links will display in a horizontal bar. Sub-menus will display in a horizontal bar beneath the root menu items.

Vertical Accordion Style

Select this option to display the menu vertically in accordion fashion. This Menu Mode is ideal when using the menu in a sidebar.

Vertical Dropdown

Select this option to display the sub menus in a vertical dropdown fashion. The sub menu will pop up above other page content.

Fixed On Scroll

Check this option to allow the menu to remain on the screen when the page is scrolled downward. The menu will always be visible and the page content will scroll underneath it. The Fixed on Scroll option is unavailable (grayed out) if the Vertical Accordion Style mode is selected.

Note: If the default Enable Responsive Conversion option is in effect, all menu modes will display your menu as an accordion in smartphones or narrow browser windows.

Menu Alignment

The menu can be aligned in one of three ways, select one the these methods in the Drop-Down listing:

Enable Responsive Conversion

By default, the menu will adapt to the width of the available browser window or device. The menu will automatically convert to a vertical accordion-style menu when the available width is less than a threshold amount set in a media query inside the menu CSS file. The default threshold is optimally set for all smartphones.

Start With Closed Toolbar State

By default, when the menu displays as an accordion in smartphones and narrow browser windows, it will be closed. The toolbar will contain an
icon and a text label that will enable users to reveal the menu. Un-check this option if you wish to have the menu show in an open state by default. In both cases the user will be able to control the visibility of the menu by clicking the Hide Menu or Show Menu icon at the top of the page.

Trigger Action

Enable Mouse Over Action

Check this box to allow mouse-over activation of the menu triggers. Hovering over a menu trigger will open its sub-menu. Moving the mouse away from the trigger will close the sub-menu. The click behavior to open or close the sub-menu will still remain enabled to support keyboard and mobile device users.

Keep Current Marked Sub-Menu Persistent

Check this box to set the sub-menu that is related to the current-marked menu item to always be visible (persistent)—except when other sub menus are showing. This option is only relevant when the Enable Mouse Over Action option is checked. In click-only mode, the current sub-menu will display until another menu trigger is clicked.

Current Marking

These settings control the operation of the included automatic Current Marking system.

Enable Current Marking

Check this box to enable automatic current marking (highlighting) of links in your DMM menu. The system looks for links in the menu that match the current page address. When a matching link is found, it's highlighted. The system assigns a special style class named current_mark to this link and also to its associated Trigger Link.

Drop Menu Magic includes an Advanced Current Marker system to allow you to handle exceptions—so that even pages that do not appear as links in the menu can have a specified link Current Marked.

Include URL Parameters in Match

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

Image Swap Options

The system supports using images for any of the Trigger links and is designed to automatically handle pre-loading, swapping, maintaining states, and assigning a current-marker. This automation requires that you follow the image file name convention. The system supports up to 3 different image states. Select the Swap Option that you would like to use:

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.

Rollover Open State

This controls the swap action when the trigger link is in its open state. The system will swap to the over image if the trigger link is in the open state and you have a 3-state swap option set. Uncheck the box if you want to disable this swap action.

Animation Method

You can choose from 6 animation methods or animation can be turned off.

Animation List

The Animation List

Duration

This option allows you to control the animation speed. Duration defines the total amount of time that the animation will run, in milliseconds, regardless of a content panel's dimensions. The default 450 is fine in most cases. Lower the Duration setting and the animation will be faster. Raise the setting to make the animation slower.

Style Theme

DMM comes with pre-defined CSS style themes that are designed to coordinate with the design of the DMM Page Pack that you are using. The listing will show the menu style themes for all of your installed DMM Page Packs.

Style Themes

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.