Pop Menu Magic 3 is the first auto-responsive multi-level menu system for Dreamweaver.
For this guide we are going to examine the PMM3 Theme 6 (Blue Pearl) CSS file: p7PM3-06.css which is representative of all the available themes. Here is an example Blue Pearl menu for reference:
Note: PMM3 uses a single CSS file for each theme—covering all three menu modes: Horizontal, Vertical, and Smartphone.
line-height: 1;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 18px;
font-stretch: condensed;
background: linear-gradient(180deg, rgba(205,175,168,1), rgba(172,118,104,1));
background-color: #C19C93;
border-bottom: 1px solid #000;
-webkit-transform-style: preserve-3d;
This is the root PMM3 container. We use a container to make it easy for you to align the menu. The background is set with a CSS linear gradient that begins with color rgba(205,175,168,1) (light sand) and ramps to rgba(172,118,104,1) (medium sand). The gradient direction is set to 180 degrees, which ramps the colors from top to bottom. A background color that falls between the starting and ending gradients is set as a fallback for old browsers. If you change the font-family from Arial Narrow, you will probably want to reduced the font-size to less than 18px and also remove the font-stretch property.
The "-webkit-transform-style: preserve-3d" declaration is a hack to fix a bug in Safari browsers that sometimes causes a flickering effect when animating elements with CSS level 3 methods.
padding: 0px 8px;
This is the root PMM3 container for horizontal menus. Left and right padding is set to 8px.
padding-top: 16px;
background-color: rgba(255,255,255,0);
The PMM3 script dynamically creates an advanced structure beyond the actual HTML markup you see in your page code. This advanced structure includes DIVs that can be used to provide positioning options. In this rule, the top padding provides vertical separation between the root level of a horizontal menu and its first sub-menu when you use Theme 6 (Blue Pearl). The background color is set to white with full alpha transparency. This is to ensure that your sub-menu will not accidentally close if your cursor wanders into the area defined by the padding.
padding-top: 0px;
For third-level menus (in a horizontal menu, these would be the levels that fly out) we turn off the top padding that we set for the first sub-level in the previous rule.
border-top: 1px solid #000;
border-bottom: none;
In a horizontal menu, when the option is set to open sub-menus upward, we want to assign a top border to the root structure and remove the bottom border.
display: none;
The toolbar is what appears above the menu in smartphones. This is hidden by default and appears via a rule in the smartphone media query when the browser or device width is 700 pixels or less.
border-radius: 0px 0px 0px 0px;
If you are deploying your menu in a scenario where it is not full browser width, this rule will enable you to quickly add rounded corners to any or all sides of the root menu. The order of the values is: Top Left, Top Right, Bottom Right, Bottom Left.
border-bottom-color: #FFF;
box-shadow: 0px 0px 60px rgba(0,0,0,.3);
When the Outer Shadow option is selected in the PMM3 interface, this rule assigns a shadow and complementary bottom border to the root menu structure.
border: none;
vertical-align: bottom;
When an image is also a link, some browsers will draw a border around the image. This rule ensures that will not happen. When using strict or HTML 5 DOCTYPEs, images align to the text baseline, leaving a slight gap below (for character descenders). Setting vertical-align to bottom prevents the gap.
text-align: center;
Centers a horizontal menu based on your choice of alignment in the meu interface.
text-align: right;
Right aligns a horizontal menu based on your choice of alignment in the meu interface.
content: "\0020";
clear: both;
font-size: 0px;
line-height: 0;
display: inline;
height: 0px;
This rule serves to clear the floated elements inside the menu.
margin: 0px;
padding: 0px;
display: inline-block;
vertical-align: bottom;
The menu UL element is displayed as an inline block, which permits the menu to be easily aligned using the text-align property on the .
or . classes that the interface assigns when you choose an alignment option other than left. In HTML5, inline or inline-block elements sit above the text baseline so we use vertical-align bottom to remove unwanted whitespace below the menu.list-style-type: none;
float: left;
position: relative;
The root menu list items. This class defines the essential menu structure.
display: block;
padding: 12px 18px;
color: #000;
text-decoration: none;
font-size: 1em;
background-repeat: no-repeat !important;
background-position: left center !important;
This rule defines the root level links.
background-image: url(img/pmm3-right-dark.gif);
This rule targets the root trigger links when their sub-menu(s) are closed by assigning an arrow background image.
background-image: url(img/pmm3-right-dark.gif);
This rule targets the sub-menu trigger links when their sub-menu(s) are closed by assigning an arrow background image. It exists as a separate class to allow you to make changes that target only the sub-level.
background: url(img/pmm3-down-dark.gif), linear-gradient(90deg, rgba(172,118,104,0), rgba(172,118,104,1));
This rule targets the root trigger links when their sub-menu(s) are open by assigning 2 background attributes (separated by a comma): an arrow and a linear gradient.
linear-gradient(90deg, rgba(172,118,104,0), rgba(172,118,104,1));
The root_link class is programmatically assigned to root links that are not triggers. In other words, links that do not have related sub-menus. This class assigns a linear gradient on hover.
color: #000;
background-color: #B08377;
url(img/pmm3-down-dark.gif), linear-gradient(90deg, rgba(172,118,104,0), rgba(172,118,104,1));
This rule targets sub-menu trigger links when their sub-menu(s) are open. We assign a text color, a background-color (for old browsers) and use the background property to assign both an arrow image and a linear gradient.
color: #000;
background-color: #B98E84;
none, linear-gradient(90deg, rgba(172,118,104,0), rgba(172,118,104,1));
The pm3-link class is programmatically assigned to all links that are not triggers. Prefacing the class with ul ul li targets only those elements in the sub-menus. When such links are hovered, we assign a text color, a background-color (for old browsers) and use the background property to remove the background image arrow and to assign a linear gradient.
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(221,221,221,1));
background-color: #DDD;
display: block;
text-align: left;
width: 200px;
The sub-menu UL element. We assign a linear gradient and a background-color (for old browsers). Do not edit the display or text-align properties. Width is set to be the default width should you deselect the default Auto Sub Menu Width option in the interface. If you turn off the Auto Sub Menu Width option, the width set in this rule will become active. You can then edit it to any value you wish to use.
background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(221,221,221,.92));
The sub-menu UL element when the Sub Menu Transparency option in the menu UI has been selected. When using RGBA colors, the last value is the Alpha value, which is used to set a transparency level—in this case .92 (1 is fully opaque and 0 is fully transparent).
box-shadow: 0px 0px 10px rgba(0,0,0,.75);
The sub-menu UL element when the Outer Shadow option in the menu UI has been selected.
width: auto;
When the default Auto Sub Menu Width option in the interface is on, sub-menu width is set to auto by this class.
white-space: nowrap;
When the default Auto Sub Menu Width option in the interface is on, the sub-menu link items are set to not wrap. This allows the sub-menu width to be based on the longest menu item. If you have unusually long menu items that force your sub-menu to be too wide, simply turn off the Auto Sub Menu Width option. Your menus will then be set to 200px (an editable value in the .p7PM3-06 ul ul rule) and menu items longer than that value will wrap to a new line.
position: relative;
float: none;
margin: 0px;
padding: 0px;
Structural rules for the sub-menu list items.
border: none;
color: #000;
font-size: .9em;
padding: 10px 18px;
Sub-menu link items.
border-bottom: none;
We turn off the bottom border for the last menu item.
Do not edit
border-radius: 5px;
border-radius: 0px;
border-radius: 5px 5px 0px 0px;
border-radius: 0px 0px 5px 5px;
border-radius: 5px;
border-radius: 5px;
padding-bottom: 10px;
padding-bottom: 0px;
border-radius: 5px 5px 5px 5px !important;
border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 0px 0px !important;
border-radius: 0px 0px 5px 5px !important;
border-radius: 5px;
You can optionally set any item in your menu to display as a title rather than a link. Menu items set to this option are no longer links. They can be used instead to break down a sub-menu into different sections or to include a marketing message.
padding: 12px 18px;
color: #DDD;
background: linear-gradient(90deg, rgba(72,72,72,1), rgba(0,0,0,1));
background-color: #222;
Use this rule to set specific padding and colors for your title.
white-space: nowrap;
The following rules style your menu items when you use images instead of text.
border: none;
padding: 0px;
text-align: center;
background: none !important;
border: none;
width: auto !important;
height: auto !important;
max-width: 100%;
vertical-align: bottom;
The following rules apply only to menu's that are set to display vertically.
border: none;
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(221,221,221,1));
background-color: #DDD;
The root menu for vertical mode menus.
padding-top: 0px;
We disable any top padding for vertical menu DIVs.
box-shadow: 0px 0px 10px rgba(0,0,0,.5);
Shadow is set for the root if the shadow option is selected in the menu UI.
display: block;
The root and sub-menu UL elements in vertical menu mode are set to display block—as opposed to the inline-block setting needed for horizontal mode.
float: none;
padding: 0px;
position: relative;
Vertical menus do not need to float.
padding: 0px;
margin: 0px;
We turn off any padding or margins for the sub-menu LI elements.
The current mark class is assigned to any link that matches the current page address. This allows that link to be highlighted to indicate to the visitor the page they are viewing with respect to the menu.
text-shadow: -.5px 0px 0px #000;
We set a text shadow to simulate bold. By doing it this way, we eliminate the shift in menu width that occurs on page load as the system detects the current page link and changes it from normal to bold.
text-shadow: none;
font-weight: bold;
We turn off text-shadow for sub-menu current marked links and we assign font-weight bold.
text-shadow: none;
font-weight: bold;
We turn off text-shadow for all current marked links and we assign font-weight bold for vertical menus.
The following rules enable your menu to work even when javascript is disabled in the browser. They should not be edited.
.p7PM3-06.p7PM3noscript {
position: relative;
}
.p7PM3-06.p7PM3noscript ul ul {
position: absolute;
display: none;
top: 100%;
}
.p7PM3-06.p7PM3noscript ul ul ul {
display: none;
top: 0px;
left: 100%;
}
.p7PM3-06.vert.p7PM3noscript ul ul {
top: 0px;
left: 100%;
}
.p7PM3-06.p7PM3noscript li:hover ul {
display: block;
}
.p7PM3-06.p7PM3noscript li:hover ul ul, .p7PM3-06.p7PM3noscript li:hover ul ul ul, .p7PM3-06.p7PM3noscript li:hover ul ul ul ul, .p7PM3-06.p7PM3noscript li:hover ul ul ul ul ul, .p7PM3-06.p7PM3noscript li:hover ul ul ul ul ul ul {
display: none;
}
.p7PM3-06.p7PM3noscript li li:hover ul, .p7PM3-06.p7PM3noscript li li li:hover ul, .p7PM3-06.p7PM3noscript li li li li:hover ul, .p7PM3-06.p7PM3noscript li li li li li:hover ul, .p7PM3-06.p7PM3noscript li li li li li li:hover ul {
display: block;
}
The following rules style breadcrumb trails made using the optional PMM3 Breadcrumb command.
text-align: center;
text-align: right;
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 1em;
display: inline-block;
list-style-type: none;
display: block;
float: left;
margin-right: .25em;
The above breadcrumb rules define the structure of the breadcrumb elements and should not be edited.
text-decoration: none;
color: #000;
The breadcrumb link element and its color, which is set to black (#000) by default.
text-decoration: underline;
The breadcrumb link element hover style. By default we are simply underlining the link. Feel free to add a color if you want.
margin-right: 0px;
font-weight: bold;
We disable any right margin for the last link in the breadcrumb. We also make the last link bold as it will usually relate to the page you are on.
The following rules set separator characters in accordance with the separator option in the Breadcrumb UI. Do not edit the values.
The following Media Query targets smartphones and narrow windows. These rules determine how the menu looks when it is reconfigered into a vertical accordion-type menu on small devices or in very narrow browser windows. Please limit yourself to color changes only—unless your CSS skills are fairly advanced.
display: none;
display: block;
background-color: #222;
padding: 10px;
text-align: right;
cursor: pointer;
The toolbar is the element that appears above the menu in small devices. This element contains a toggle icon, as well as optional text to allow a visitor to show or hide the menu. We set this element to display: block so that it is visible. We set a background-color, padding, text alignment, and a pointer cursor.
font-size: 2em;
font-weight: bold;
color: #999;
text-decoration: none;
The link items inside the toolbar. Font-size is set larger to properly display the character entity used for the icon.
color: #09F;
The toolbar link element when hovered.
content: "Show Menu \0020";
font-size: .5em;
If the Show Toggle Text option is enabled, you can use this rule to change the text that appears next to the icon when the menu is hidden. You can, for example, change the language.
content: "Hide Menu \0020";
font-size: .5em;
Use this rule to change the optional text that appears next to the icon when the menu is visible. You can, for example, change the language.
text-align: left !important;
padding: 0px !important;
border: none !important;
box-shadow: none !important;
The root menu in smartphone mode. We are turning off properties that should not ordinarily be used for this mode.
padding-top: 0px !important;
display: block;
padding: 0px;
margin-top: 0px;
float: none;
margin-right: 0px;
padding: 0px;
color: #DDD;
background-color: #333;
position: static !important;
width: auto;
padding: 0px;
padding-left: 24px;
We assign a larger padding value to the sub-menu link items to create an indented-level look.
padding-left: 32px;
We assign a larger padding value to the third-level sub-menu link items to continue the indented-level look. You can add additional levels if you wish. The next level, for example, would be targeted with a selector name of .p7PM3-06.responsive ul ul ul ul a.
display: none;
display: block;
The above 2 rules work in conjunction with the toolbar icon (and optional text) to show and hide your menu.
border-radius: 0px !important;
Using the universal selector (denoted by the asterisk) we turn off rounded corners for all elements in the menu when it is in smartphone mode.
box-shadow: none !important;
Using the universal selector (denoted by the asterisk) we turn off shadows for all elements in the menu when it is in smartphone mode.
display: none;
We hide the breadcrumbs, by default, in smartphone mode. In most cases they would occupy too much valuable space and would not really be helpful for smartphone users. You can override this rule by choosing the Show Breadcrumbs in Mobile Mode option in the Breacrumb UI.
display: block;
Shows the breadcrumb trail in smartphones when the Show Breadcrumbs in Mobile Mode option is enabled in the Breacrumb UI.
padding: 12px 18px !important;
Provides padding for menu items set to Display as Title Only.
This document will evolve to include additional information. If there is anything you are unsure about please do not hesitate to ask for support. PVII Support Home...
The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.
RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.
In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:
The System Color Picker will open:
Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:
rgba(102,204,102,1);
Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:
rgba(102,204,102,.5);