DMM in a Page Builder 2 Page

You've discovered PVII Affinity and its automagical responsive Drop Menu Magic system and you'd love to be able to use the menu in sites you've created with Page Builder Magic 2. What say we? Of course you can. We would never deny you the satisfaction of being able to use the first automatically responsive menu system ever available as a Dreamweaver plugin.

Download the CSS and link it

Simply download a small CSS file called dmm-pbm2.css and save it inside your p7csspbm folder.

 

Add your DMM menu

If you are replacing the default horizontal menu in your Page Builder page, go into code view and locate the menutop-wrapper DIV:

<div class="menutop-wrapper">
<ul class="menutop">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>

Delete the entire menu UL, leaving a blank line where it was, so the code looks like this:

<div class="menutop-wrapper">

</div>

Place your cursor on the blank line, open the Drop Menu Magic interface and create your menu. Makes sure to select the Vertical Drop Down menu mode.

Switch back to design view.

Link the dmm-pbm2.css file to your page

Choose Format > CSS Styles > Attach Style Sheet

Browse to the dmm-pbm2.css file. Make sure Add as Link is selected, and then click OK.

That's it!

Adding a vertical DMM menu to your sidebar

Simply delete the default menu. Make sure to delete the entire UL, which will look something like this:

<ul class="menuside">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>

Insert your DMM menu where the default menu was.