Pop Menu Magic 2...The Ultimate Multi-Level Menu Builder for Dreamweaver

PMM 2 Tweaks Main

Pop Menu Magic 2 Positioning This Page: Full-Width Root Menu


The menu on this page uses default positioning but we've set the width of each menu item to completely fill the width of this layout. Here's how we did it...

The layout wrapper is 770px wide. The containing element (div id="masthead") has a 1px border on the left and the right. That leaves 768px to fill up with our menu items. The PMM2 system programatically assigns special classes to each root LI tag, using the naming convention root_x, where "x" corresponds to the number of your root menu items, from left to right. Our menu has 5 root items, so we need to create 5 new rules in our CSS. These rules will assign a specific width to each root menu item.

In order to support more than one menu on the page we preface each rule's name with the root ID of our target menu, which is #p7PMM_1. We'll use these rules to assign a width to each root level item. We have 768 pixels to fill, so with a little trial and error, we come up with the following widths declared in the new CSS rules that we add to our sheet:

#p7PMM_1 .root_1 {width: 140px;}
#p7PMM_1 .root_2 {width: 210px;}
#p7PMM_1 .root_3 {width: 100px;}
#p7PMM_1 .root_4 {width: 140px;}
#p7PMM_1 .root_5 {width: 178px;}

The sum of the above widths is (and must be) 768px.

We've also set the root link text to center align by editing the .p7PMMh08 a CSS rule. To keep this tweak specific to a single menu, use the menu's root ID in your sselctor name, like this: #p7PMM_1.p7PMMh08 a {text-align: center;}.

This rule will center all menu text and, it's fair to assume that you'll want your sub-menu text to be left-aligned. To do that, we write a second CSS rule, targeting the sub-menus, like this:

#p7PMM_1.p7PMMh08 ul ul a {text-align: left;}

But now the root items are centered and the sub-menu items are left-aligned and it would all look prettier if, when the sub-menu appeared, the root item and the sub-items were in alignment. No problem. We write another custom rule to left-align the root items—but only when their sub-menus are showing.

#p7PMM_1.p7PMMh08 ul a.trig_open {text-align: left;}

Tip: If you have not noticed by now, the width of the sub-menu under Much Longer Menu Item is greater than the other sub-menus. We did that with the following rule: #p7PMM_1 .root_2 ul {width: 210px;}. That matches it to its trigger link. Of course, that means that if wanted to, you could set width for each of your sub-menus to match its parent trigger's.

This is pretty cool. But the last sub-menu goes past the edge of the layout. Is there a way to constrain it so that it stays inside? There are actually 2 ways. You can use the technique explained in the above tip to make the last sub-menu the same width as its parent trigger or you can use the Center and Justify option built into PMM2, which you can see in the next example.

Next: Full-Width Root Centered/Justified