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.

PMM2: Popping Out with CSS3

Pop Menu Magic 2 CSS Menu Craftsmanship

See the finished page

This tutorial serves 2 purposes. It will teach you how to make a beautiful Pop Menu Magic 2 menu. It will also illustrate just how simple it is to use CSS to customize any Pop Menu Magic 2 menu.

Before you begin

This tutorial was made using the latest version of PMM2.
Please install the free update if necessary

1. Create your Base menu

Open Dreamweaver and select a Defined Dreamweaver local site if one is not currently selected. Create a new folder named pmm-popping-out. Create a new page named tutorial.htm inside your new folder. Open tutorial.htm in Design View.

Click once on the page to set an insertion point then click the Pop Menu Magic 2 icon in the PVII Section of Dreamweaver's Insert Bar or Insert Panel.

Alternatively, you can choose Insert > Studio VII > Pop Menu Magic 2 by PVII

The PMM2 interface will open.

Note: You will be instructed to make entries and set values in the interface. If you are not instructed to make an entry for a particular option in the interface, leave that option set to its default value.

Use the Add Item button to add 4 main menu items: Home, Our Products, Articles on File and About Us

Use the Add Sub button to create sub-menus under Our Products and Articles on File (add more sub-menu levels if you want)

Set the Link Path for Home to tutorial.htm

Leave the Link Path value set to # for all other menu items

Set Menu Type to Horizontal

Set Sub Menu Offest Top to -15

Set Style Theme to 09-Pipes

Click OK

Your menu is built.

Add custom classes to the root menu items

Switch to code view and locate the 4 root menu items Home, Our Products, Articles on File and About Us.

Add a class to the <a> tag of each root link. The class names, in order, will be r1, r2, r3, and r4:

<li><a href="tutorial.htm" class="r1">Home</a></li>
<li><a href="#" class="r2">Our Products</a>
<li><a href="#" class="r3">Articles on File</a>
<li><a href="#" class="r4">About Us</a></li>

This will allow us to create 4 CSS rules, one for each root link, to set a stacking order (z-index) that makes the root links 3-dimensional.

You can switch back to Design View now and save your page.

In the second part of the tutorial you will turn a simple PMM2 Pipes Theme menu into a finely crafted thing of beauty using modern CSS.

If you are a proficient CSS author, you can skip the rest of the tutorial and download the finished CSS file. Simply replace your default p7pmm/p7pmmh09.css file with the one you download and your menu will instantly turn into the finished tutorial menu.

2. Transform the menu with CSS

While CSS editing in Dreamweaver CS5.5 or CS6 can be done using the CSS panel, Dreamweaver CS5 and older have poor support for modern CSS—so we'll work directly inside the CSS file.

Locate and open the p7PMMh09.css file inside your pmm-popping-out/p7pmm folder.

Color coding for the edits

The red and teal highlights are visual aids for the tutorial. Red code means a property exists in the default style sheet and you are changing its value. Teal code means you will add a new property to the CSS rule. Black code indicates properties that are the same as the default CSS. If a property exists in the default CSS and not in the tutorial rules, that means that the property is deleted. The rules listed below completely replace the matching rules in the default CSS file.

.p7PMMh09 {
width: auto;
margin: 0 auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: inherit;
text-align: center;
line-height: normal;
background-color: #222;
border: 1px solid #FFF;
box-shadow: 0px 0px 30px #999;
}

Note: The CSS approach used here enables you to position your menu left, center, or right aligned simply by changing the text-align value in the above rule. Do not use the Auto Center option in the PMM2 interface.

 

.p7PMMh09 ul {
margin: 0;
padding: 0;
display: inline-block;
overflow: hidden;
}

.p7PMMh09 li {
list-style-type: none;
float: left;
}

.p7PMMh09 a {
display: block;
text-decoration: none;
padding: 12px 18px 12px 12px;
color: #000;
text-align: left;
background-color: #D8D8D8;
box-shadow: 0px 5px 20px #000;
position: relative;
border-right: 1px solid;
border-color: #BBB;
}

.p7PMMh09 a:hover {
color: #FFFFFF;
background-color: #699;
z-index: 100;
border-color: #4A6F6F;
}

.p7PMMh09 a.pmmlast {
border-right: none;
}

.p7PMMh09 ul ul {
z-index: 10000;
width: 200px;
display: block;
box-shadow: 1px 1px 10px #000;
background-color: #699;
border-radius: 0px 4px 4px 4px;
}

.p7PMMh09 ul ul a {
padding: 4px 12px;
color: #FFF;
background-color: transparent;
text-align: left;
border: 0;
font-size: 0.9em;
overflow: hidden;
box-shadow: none;
position: static;
}

.p7PMMh09 ul ul a:hover {
background-color: #222;
color: #FFF;
box-shadow: 1px 1px 10px #A2C1C1;
}

.p7PMMh09 ul ul ul {
border-radius: 4px;
}

.p7PMMh09 ul a.trig_open, .p7PMMh09 ul a.trig_open_up {
color: #FFFFFF !important;
background-color: #699 !important;
z-index: 99;
border-color: #4A6F6F;
}

.p7PMMh09 ul ul a.trig_open {
color: #FFF !important;
background-color: #222 !important;
box-shadow: 1px 1px 10px #A2C1C1;
}

.p7PMMh09 .current_mark {
font-weight: bold;
color: #FFF !important;
background-color: #999999 !important;
z-index: 99;
border-color: #666666;
}

.p7PMMh09 ul ul .current_mark {
color: #000 !important;
background-color: #699 !important;
}

These are new rules that do not exist in the default style sheet. Add them to the bottom of the CSS file.

.r1 {z-index: 20;}
.r2 {z-index: 19;}
.r3 {z-index: 18;}
.r4 {z-index: 17;}

The body rule is provided as a convenience and to ensure that your work page has zero margins and a minimum width set. You can place this rule in your page head or at the bottom of your menu CSS file. When you are ready to use your menu in a real page, this rule should be incorporated into your page layout CSS.

body {
background-color: #FFF;
margin: 0px;
min-width: 960px;
}

That's a wrap!

Browser issues

CSS3 shadow and border-radius effects are supported in modern browsers (including IE9). Old browsers will simply display the menu, nicely styled and colored, but without shodows and curves.

The inline-block technique used to facillitate easy menu alignment is supported in all modern browsers and in IE8. To support IE7 and under add this conditional comment just before the closing </head> tag in your code:

<!--[if lte IE 7]>
<style>
.p7PMMh09 ul {display: inline;}
</style>
<![endif]-->