Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #176

How can I set a horizontal PopMenu Magic (PMM) system to automatically expand to the full width of the browser window?

The Answer

Prepared Nov. 2005 by Gerry Jacobsen, PVII

By default, the horizontal styles in PopMenu Magic are set up with a pre-defined width for each of the root menu links. You can tweak the styles sheet to allow the entire menu to span the full width of the browser window, with each root link automatically expanding or contracting to the proper width.

The PopMenu Magic Auto Full Width Example page demonstrates this effect.

Here's how:

1. Insert the PMM menu into a page element, usually a div or a table cell. that spans the entire window.

2. Set the width of the base menu element to 100%. Add this style rule to your menu style sheet:

#p7PMnav {
   width:100%;
}

This sets the menu to use the width of the element that it is placed into, the div or table cell.

3. Next we'll create a rule that will set the width for each of the root menu links. We'll use a percentage instead of a fixed pixel amount so that the browser will automatically adjust the width as needed. The percentage amount is calculated by dividing 100 by the number of root menu links; if you have 5 root menu links then then each link will be 20% (100/5=20), if you have 4 menu links then each link will be 25% (100/4=25).

For this example we'll be using a 5 button menu, add this style rule to bottom of your menu style sheet:

#p7PMnav li {
   width:20%;
}

4. Optional - The full width menu will look a bit better if the root menu links have their text centered. Add this set of style rules to the bottom of your menu style sheet:

#p7PMnav a {
   text-align: center;
}
#p7PMnav ul a {
   text-align: left;
}

5. Lastly, we'll address a "rounding" bug in Internet Explorer that results in the last menu item wrapping to a new line. To get IE to calculate properly add we'll add a Conditional Comment.

Go into CodeView, and copy and paste this IE Conditional Comment just before the ending </head> tag of your page:

<!--[if lte IE 7]>
  <style>
  #p7PMnav li{width:expression(Math.floor(document.getElementById('p7PMnav').offsetWidth/5));}
  </style>
<![endif]-->

Notice the number 5 at the end of the comment, this represents the number of root menu links in your menu. Change this number to reflect the number of root links that your menu actually has.

That's it! Save your page and the style sheet. The menu will now span the entire width and each root menu item will expand or contract as needed.

Back to the questions list