To Convert an Existing List-Based menu to a PMM2 menu
Wrap your root menu UL inside a DIV. In this example we are converting a PMM1 menu, but you can convert any UL-based menu including Spry, Suckerfish, or a plain unordered list.
Use the Wrap Tag command on the Coding Toolbar in Dreamweaver Code View.
Select the entire root menu UL.
In a PMM1 Menu, The root UL ends below the IE conditional comments
Wrap a DIV tag around the root UL.
Assign a PMM2 ID and class to the DIV. In this example, the class is for the Cayenne Theme:
<div id="p7PMM_1" class="p7PMMv08">
Note: The ID for the first PMM2 menu on a page is always p7PMM_1.
Now place your cursor anywhere inside the menu and open the PMM2 Interface:
Insert > Studio VII > Pop Menu Magic 2 by PVII
The system will recognize the ID and class on the root DIV, but will pop up an alert box because the initializer script block could not be found. That's alright...
Click OK
The interface will populate with your existing menu items and the Cayenne theme will be active.
Change the style theme or options and then...
Click OK
Your menu is now converted to a PMM2 menu.
Clean up
In this example, we converted a PMM1 menu. To complete the conversion you'll need to delete the PMM1 script link, imported CSS file, and the body onload handler.
Remove the script tag
In source code, locate the script tag:
<script type="text/javascript" src="p7pm/p7popmenu.js"></script>
Delete it.
Remove the style sheet
Locate the CSS import. If it contains only the PMM1 style sheet, like this:
<style type="text/css" media="screen">
<!--
@import url("p7pm/p7pmv0.css");
-->
</style>
Delete the entire style sheet (5 lines in total)
If it contains other style rules, like this:
<style type="text/css" media="screen">
<!--
@import url("p7pm/p7pmv0.css");
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 85%;
}
-->
</style>
Delete only the @import line, so it looks like this:
<style type="text/css" media="screen">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 85%;
}
-->
</style>
Remove the onload handler
Locate the opening body tag, which should look like this:
<body onload="P7_initPM(0,0,1,-20,10)">
Change it to this:
<body>
If you have other scripts being called, like this:
<body onload="P7_initPM(0,0,1,-20,10);initMyScript()">
Remove only the PMM init function, so it looks like this:
<body onload="initMyScript()">
That's it. Your conversion is complete.
Cleaning up for a Spry Menu conversion
To clean up after converting a Spry menu, you'll need to remove the linked CSS and JavaScript, and the constructor.
Remove the linked Spry CSS and Script
Locate these 2 lines in your document's head:
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
Delete them.
Remove the Constructor script block
Locate this code towards the end of your document's body section (it might be a bit different depending on your menu configuration):
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Delete it.
Your menu is now converted.