Pop Menu Magic 2 Positioning This Page: Full-Width + Centered & Justified Subs
The menu on this page uses the Center and Justify positioning option. To set this option select the Center and Justify option from the 1st Sub Level Align To list in the PMM2 user interface.
We've also set the width of each menu item to completely fill the width of this layout.
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.
To make these rules apply only to one menu on the page (you may want to add more menus later), 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 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 way cool.