Maxi Menu Magic User Guide

Overview

When you need more than simple drop-down and fly out menus, you need a Maxi menu! Maxi Menu Magic allows you to combine traditional drop-down fly out menus with content-rich mega menus in a responsive, adapting, and totally gorgeous way.

Maxi Menu does vertical menus, too

Vertical Maxi Menus display as a multi-level accordion, a perfect configuration to be placed in a sidebar, for instance.

Work from a visual UI inside Dreamweaver

Maxi Menu Magic actually comes with two primary UIs. The main UI is where you create and configure your menu, choosing various options, settings, and styling options. The Maxi Sub Layout Manager is where you manage the row/column configuration of your Maxi Sub Menus.

Read on and you'll see how it all comes together...

Maxi Menu Magic Asset Folders

When you create a Maxi Menu, the system will automatically create the asset files and folders necessary to power your menu, and link them to your page. The main asset folder is called p7mxm.

When publishing your site, make sure to upload the entire p7mxm folder.

Editing CSS

It is important that you do not edit or alter the core or colors CSS files. Any exception or custom rules you add should be added to the p7MXM-01 CSS file only. This is important. In the event an update or new feature is added, the update could require you to replace the core or colors CSS files.

Installing Maxi Menu Magic (MXM)

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher, including Creative Cloud versions. To install, open the relevant Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Relevant Extension Managers

For Dreamweaver MX, MX 2004, CS3, CS4, CS5, CS5.5, and CS6, use the Macromedia or Adobe Extension Manager that automatically installed with Dreamweaver.

For Creative Cloud versions, use the free PVII Extension Manager for Adobe Creative Cloud:

PVII Extension Manager for Adobe CC
( Windows and Mac)

Accessing the Maxi Menu Magic Main UI

There are 3 ways to access MXM. Choose the one most suitable to your workflow. When you open the interface, the system will detect the appropriate mode (Insert or Modify) based on where your cursor is.

When you are Creating a new menu instance, place your cursor on your page where you want to build it. If Modifying an existing instance, place your cursor anywhere inside the existing menu and use one of the 3 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. MXM is the next to last icon in the screen capture below.

2. Insert Panel

Switch to the PVII category.

3. Insert Menu

Choose Insert > Studio VII > Maxi Menu Magic by PVII

If your cursor is not inside another MXM instance, the main UI will open in Create Mode.

If your cursor is inside an existing menu, the UI will open in Modify mode.

Converting Menus Made with other menu builders

MXM will convert any list-based (UL) menu, including Adaptive Menu Magic, Pop Menu Magic (all versions), Drop Menu Magic, Layout Builder NAV, Bootstrap, jQuery, as well as simple unordered lists.

Simply place your cursor inside your existing menu and open the interface.

The Convert UI will open...

To convert your existing menu, click the Convert to MXM button.

The main interface will come into focus. The converted menu's options will be set to MXM defaults. Change the options to suit and click OK to finalize the conversion.

Converting a Mega Menu Magic Menu

Mega Menu Magic menus will not convert fully. To make the conversion seamless, you'll need to prepare the code. An MGM menu in Code View looks something like this:


            <div id="p7MGM_1" class="p7MGM-01 p7MGM p7MGMdesign-time responsive menu-centered">

              <div id="p7MGMtb_1" class="mgm-toolbar closed"><a href="#" title="Hide/Show Menu">&equiv;</a></div>

              <ul id="p7MGMu_1" class="mgm-root-list">

              <li class="mgm-root-item"><a id="p7MGMa1_1" class="mgm-root-item" href="#">Menu Item</a></li>

              <li class="mgm-root-item"><a id="p7MGMa1_2" class="mgm-root-item" href="#">Menu Item</a></li>

              <li class="mgm-root-item mgm-trig"><a id="p7MGMa1_3" class="mgm-root-item mgm-trig" href="#">Menu Item</a></li>

              <li class="mgm-root-item"><a id="p7MGMa1_4" class="mgm-root-item" href="#">Menu Item</a></li>

              </ul>

              <div id="p7MGMs1_3" class="mgm-mega-menu width100">

              <div class="mgm-mega-content">

              <div class="p7mgm-row mgm-col-default">

              <div class="p7mgm-ColContent">

              <p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant facilisi.</p>

              </div>

              </div>

              </div>

              </div>

              <script type="text/javascript">P7_MGMop('p7MGM_1',5,450,0,1,1,1,0,0,1,0,1,900)</script>

              </div>

Strip out all of the code except for the main menu UL:

<ul id="p7MGMu_1" class="mgm-root-list"> <li class="mgm-root-item"><a id="p7MGMa1_1" class="mgm-root-item" href="#">Menu Item</a></li> <li class="mgm-root-item"><a id="p7MGMa1_2" class="mgm-root-item" href="#">Menu Item</a></li> <li class="mgm-root-item mgm-trig"><a id="p7MGMa1_3" class="mgm-root-item mgm-trig" href="#">Menu Item</a></li> <li class="mgm-root-item"><a id="p7MGMa1_4" class="mgm-root-item" href="#">Menu Item</a></li> </ul>

Now run the converter. Unfortunately, there is no way to save the sub-menus. You will be better off recreating them.

After running the converter you can remove the links to the MGM CSS and script files in the head:

<link href="p7mgm/p7MGM-01.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="p7mgm/p7MGMscripts.js"></script>

Open the UI, as described above.

Note: When creating a new menu make sure your insertion point is outside of any existing menu instance. You can create more than one menu on a page.

Menu Options and Settings

The MXM interface is divided into 3 tabs, making customizing your menu easy!

Tab 1: Build Menu

On this tab, you create your root menu items, traditional drop-down and fly out sub menus, and Maxi sub menus.

Menu Items

The command buttons above the Menu Items list allow you to Add Menu Items, Add a Maxi Sub, Add (conventional) Sub Menu, Delete menu items, or move menu items Up and Down. You can add an unlimited number of Sub Menus for each root item, but root items can only have a single Maxi Sub.

The edit boxes below the Menu Items list allow you to set Item Link Text, a User Class, the Link Path (URL), a Target, and Scroll to Element behaviors for smooth scrolling to ID'd elements on your page.

This area is also where you set style attributes for your Maxi Sub Menus. With a Maxi Sub Menu selected in the Menu Items list, choose a Max Width, Alignment, User Class, BG (background) Color, Transparency, Borders, Rounded corners, and Box Separation.

Note: Setting Box Separation here will allow you to configure colored, boxy columns in the PVII Maxi Sub Layout Manager UI.

Tab 2: Menu Options

Manage and enhance your menu with a set of powerful options. To access the options, click the second tab: Menu Options

Control stacking order with Z-Index. Use Edge Detection, which will reposition a sub-menu if its natural position would otherwise cause it to extend past the edge of your browser.

Set the Aria Label, which alerts assistive reader users that a navigation menu follows.

Align the First Sub Level Left, Center, or Right, relative to its root trigger link. This applies to conventional drop-downs only. Also set Top Offset and Left Offset for the first sub level.

Set Sub Offset Top and Sub Offset Left for 2nd level and deeper sub-menus.

Enable (or disable) Responsive Conversion, which tells the browser to add a hamburger-driven toolbar to hide and show the menu for phones and narrow screens. This will also cause the menu to convert to an accordion-style configuration. In phone mode, you can Start With Closed Toolbar (meaning the menu will be hidden) and choose to Show Toggle Text (text that appears next to the hamburger icon).

Enable Mouse Action sets up your menu to operate on mouse over in systems that use a mouse. Fixed Position on Page Scroll, locks your menu in place at the top of the browser window, so that it's always viewable.

Choose from several smooth Animation methods and set the Duration (lower value = faster animation).

Enable or disable Current Marking, which sets the link in your menu that matches the current page address to bold. Optionally Include URL Parameters in the Match.

Tab 3: Styling Options

Style your menu with an array of powerful options. To access the styling options, click the third tab: Styling Options

Root Menu

Menu Type: Choose Horizontal or Vertical menu orientation.

Alignment: Set alignment of the root menu items Left, Center, Right, or Distribute Evenly (root menu items will be evenly distributed to fill the entire width of the menu's containing element).

Set a Border around the root menu. Set a 5px Matte (white-space) around the root menu. Assign a User Class.

Root Links

Set BG Color. Set BG Hover color. Set Transparency. Assign various Border configurations. Set Separation between links. Set Rounded corners.

Sub Menu Links

Set BG Color. Set BG Hover color. Set Transparency. Assign various Border configurations for the links. Set Separation between links. Set Rounded corners. Set Sub Menu Borders (around the entire sub-menu).

Maxi Sub Layout Manager

The main interface allows you to create Maxi Sub Menus for any of your root links. By default, we place a simple 1-column structure inside. Maxi Sub Menus are visible and fully editable inside Dreamweaver design view at all times.

You can use the Maxi Sub Layout Manager to customize the row and column configuration inside each of your Maxi Sub Menus. To open the Manager, right-click inside the Maxi Sub Menu and choose PVII Maxi Layout Manager.

Mac Note: To learn how to emulate a right-click on a Mac that has only a single-button mouse, here is what Apple recommends.

Column List

Add as many columns as you need. Use the command buttons atop the list to Add, Delete, and move your columns Up or Down.

Column Width Basis

The Layout Manager is Flexbox-based, meaning that you can add as many "columns" as you want. Browsers will assume the task of doing the math, creating a row for each set of columns that equals 100% in the aggregate. for example, a single column set to a Column Width Basis of 100% will be rendered as a row. 3 columns set to 30%, 40%, and 30% will also make a row. 6 columns set to 50%, 50%, 25%, 25%, 25%, and 25% will make 2 rows. It's pretty much foolproof. You can add as many columns as you want, to make as many rows as you want.

Note: For those not fluent in CSS Flexbox, it is advised that you stick with percentage widths.

The All Buttons

Each of the options in the UI include an All button. Clicking it will assign the same option value to each column currently in your Column List.

No Grow

Flexbox can be seriously flexible. By default, your columns will be set to Grow. That means your browser is instructed to fill the width of your Maxi Sub Menu. For instance, if you have a 3-column row that breaks to 2 columns at a certain browser/device width, the first two columns will become 50% wide, while the third column will become 100% wide. This is preferred, but you can bypass this behavior by setting the No Grow option for one or more columns.

Additionally, you can set a Section User Class (no periods, please!) or multiple classes (simply separate each one with a single space). CSS coders love this option.

Alignment and Padding

Set Content Alignment (left, center, or right). Column content can also be set to Vertical Center, and any of your columns can be set to have No Padding.

Border and Rounded Corners

Set borders and rounded corners for each of your columns.

Color Scheme

Select a background color for each of your columns. You can also make on or more columns semi-transparent by selecting the Transparency option.

Note: If you chose the Box Separation option for your Maxi Sub Menu, in the main UI, you can create neat, separated boxes with distinct colors and rounded corners. Otherwise, by default, each box (column) you create will adjoin each other. Since all columns render equal height, you can assign a left, right, or left and right border to provide a divider line.

Additionally, you can set a Content User Class (no periods, please!) or multiple classes (simply separate each one with a single space).

Styling Links Inside Maxi Sub Menus

We've included CSS that allows you to style a list of links inside your Maxi Sub Menus by placing those links inside an unordered (bulleted) list to which you simply need to assign a special CSS class. Here's how you do it:

Add your hyperlinks in consecutive paragraphs

Use the Dreamweaver Property Inspector to select all of the paragraphs and transform them into an Unordered List by clicking the relevant icon as shown here:

Your list will then look something like this:

And if you peek inside code view, the code will look something like this:

<ul> <li><a href="page-1.htm">This is a link</a></li> <li><a href="page-2.htm">This is another link</a></li> <li><a href="page-3.htm">This is a third link</a></li> <li><a href="page-4">This is the last link</a></li> </ul>

To transform the list of links, simply assign the maxi-text-list class to the UL tag:

<ul class="maxi-text-list"> <li><a href="page-1.htm">This is a link</a></li> <li><a href="page-2.htm">This is another link</a></li> <li><a href="page-3.htm">This is a third link</a></li> <li><a href="page-4.htm">This is the last link</a></li> </ul>

And your links will be transformed:

This is a link
This is another link
This is a third link
This is the last link

Want a boxy effect? Simply change the class name to maxi-text-list-boxed:

<ul class="maxi-text-list-boxed"> <li><a href="page-1.htm">This is a link</a></li> <li><a href="page-2.htm">This is another link</a></li> <li><a href="page-3.htm">This is a third link</a></li> <li><a href="page-4.htm">This is the last link</a></li> </ul>

And your links will be transformed:

This technique will work on one or more links. Simply convert the links to an unordered list and assign the maxi-text-list or maxi-text-list-boxed class. In most cases, this style will be perfectly fine for links inside a Maxi Sub Menu. Should you desire more elaborate link styles, and you are not CSS-proficient, you can use the PVII Links Toolkit.

Glassy Button Root Links

We left you an Easter Egg! As we're sure you've noted, the menu at the top of this page is a Maxi Menu Magic Menu. And the root links have a cool, glassy effect. You can easily assign that effect to either your root menu items, sub-menu items, or both by simply assigning a special user class. The class is included in the MXM CSS file, so all you need to do is assign it. Here's how:

Open the MXM main UI to edit your menu settings.

Switch to the Styling Options tab.

In the User Class box, type in glassy-root.

If you'd like to assign a glassy effect to your sub-menu links, type glassy-sub instead.

If you'd like to assign the effect to both root and sub-menu links type in both class names, separated by a single space: glassy-root glassy-sub.

Custom Color Themes

We left you a second Easter Egg! It's in the p7MXM-01.css file and it's a series of rules, each beginning with the class selector Custom-Links-Pink. If you place that class name in the Root Menu User Class box, your menu links will become... Drumroll please! ...pink. Yes!

We've written a tutorial that shows how you can create custom color themes. We suggest reading it!

Creating Custom Color Themes

UI Command Buttons

The right edge of the UI contains a set of command buttons. The button set will differ by one depending on whether the UI is open in Create or Modify Mode.

Create Mode Command Buttons

OK

Build the menu

AC Marker

Open the Advanced Current Marker UI (See Below)

Cancel

Close the UI without adding a menu to your page.

Help

Open this user guide.

Modify Mode Command Buttons

The Modify UI adds on additional button: Remove.

Remove

Click this button to remove the selected menu. If this is the only menu on your page, the links to the CSS and script files will also be removed.

Advanced Current Marker

Open the Advanced Current Marker UI by clicking the AC Marker command button.

There are four methods:

None: Disable all current marking for this menu

The None option allows you to completely turn off all current marking for this menu on this page only. This is a special override that allows you to have the menu working with current marking turned off on a specific page while it is enabled on other pages.

Match to a specific Link Text in the menu

The Link Text option allows you to select the text of any one of the existing links in your menu as the target for the current marker. When the page loads, the system will look for this text in the menu markup. If a match is found it will apply the current marker style class to the menu link.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default current marker instead.

Match to a Specified URL in the menu

The URL Match option allows you to select the link value (the href) of any one of the existing links in the system as the target for the current marker. When the page loads, the system will look for this link value in the menu markup. If a match is found it will apply the current marker style class to the menu link.

The simplest and most direct method for Advanced Current Marking is to use the Text Option. However, there may be occasions where you have duplicate text values in the menu. In these cases, you can use the URL match option to target a specific link for current marking.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default current marker instead.

Use Folder Name :: Link Text Pairs

The Folder:Text Match option is designed to allow you to handle large numbers of current marker exceptions and is typically used as a global option applied to every page. Use this option when you have a large number of pages that are not represented in the menu.

This option allows you to specify a series of folder names and link text values that the system will use for determining the current marked link in the menu. For example, you can specify that any page which contains the folder "support" in its URL will be matched to specific link text "Information". This is referred to as a Folder Name :: Link Text pair.

You can specify as many of these Folder Name :: Link Text pairs as you like. The system will test each pair until it finds a match. If a match is found it will apply the current marker style class to the menu link to provide the "you are here trail" in the menu. You can use this system to automatically handle current marking for all of your site's pages without having to edit any of them individually.

This feature should only be used on pages that are NOT linked in the menu. The Advanced Current Marker is designed to address current marking only for those pages that are not represented in the menu. If the page does have a corresponding link in the menu then that link will be used by the default Current Marker instead.

Support Options

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

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

PVII Maxi Menu Magic User Guide